In this CodePen link [https://codepen.io/anon/pen/qvQpaY], there is an issue with overlay between the two divs that have a class name of box-container. The black rectangle is being counted as the overall height by box-container because the red rectangle is positioned absolutely.
To ensure the red rectangle appears above the black one, absolute positioning must be used. However, how can I make sure that box-container considers the red rectangle in its overall height?
body {
background-color: pink;
display: flex;
justify-content: center;
}
.container {
width: 500px;
}
.box-container {
margin: 10px 0;
width: 100%;
position: relative;
}
.box-text {
width: 300px;
height: 200px;
background-color: black;
}
.box-image {
width: 300px;
height: 200px;
background-color: red;
position: absolute;
right: 0;
top: 60px;
z-index: 1
}
<div class="container">
<div class="box-container">
<div class="box-text"></div>
<div class="box-image"></div>
</div>
<div class="box-container">
<div class="box-text"></div>
<div class="box-image"></div>
</div>
</div>