I am facing a challenge with positioning two divs inside a parent div. My goal is to have the first div positioned absolutely at bottom:0 of the parent div, while the second div should always be on top of the first one.
The issue arises because the height of the first div is variable. How can I ensure that the second div remains on top of the first one in such a scenario? Please refer to the attached image for better understanding:
My attempt so far has not been successful:
HTML:
<div class="box">
<div class="wrap">
<div class="box2">box 2</div>
<div class="box1">box1</div>
</div>
</div>
CSS:
.box{
width: 200px;
height: 200px;
background: green;
position: relative;
}
.wrap{
position: absolute;
bottom: 0;
border: 1px solid blue;
}
.box1{
background: yellow;
height: 50px;
position: relative;
}
.box2{
background: red;
position: absolute;
top: 0;
}