Menu
I want to put one element under another element. I am using 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>I want the blue box to be positioned under the red box. How could I achieve this?
856
And you can to not point position , because div is block element and will be placed at new line by default. Show activity on this post. Try using clear: both; . The clear property specifies on which sides of an element floating elements are not allowed to float.
try this css . Div itself is a block element that means if you add div then it would start from under the another div. Still you can do this by using the css property that is display:block; or assign width:100%; add this to the div which you want under another div.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
just give position : relative to second div and top:315px or what ever you want
.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>Here is a solution:
.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>And you can to not point position, because div is block element and will be placed at new line by default.
.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
