wake-up-neo.com

Wie kann ich ein Element unter einem anderen positionieren?

Ich möchte ein Element unter ein anderes Element stellen. Ich benutze position: absolute in CSS.

 .first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
    <div class="first"></div>
    <div class="second"></div>

Ich möchte, dass die blaue Box unter der roten Box positioniert wird ... Wie kann ich das erreichen?

htmlcsspositionabsolute
5
khalid J-A

gib einfach Position: relativ zum zweiten div und top: 315px oder was immer du willst

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
	position: relative;
    top: 315px;
}
<html>
<head>

</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</head>

10
Mudassar Saiyed

Hier ist eine Lösung:

.first{
     width:70%;
     height:300px;
     position:absolute;
     border:1px solid red;
     box-sizing: border-box;
}
.second{
    position: relative;
    border:2px solid blue;
    width:40%;
    height:200px;
    top: 300px;
    box-sizing: border-box;
}
<div class="first"></div>
    <div class="second"></div>

Sie können nicht auf position zeigen, da div ein Blockelement ist und standardmäßig in einer neuen Zeile platziert wird.

.first{
     width:70%;
     height:300px;
     border:1px solid red;
 }
.second{
    border:2px solid blue;
    width:40%;
    height:200px;
}
<div class="first"></div>
<div class="second"></div>

1
Banzay