Overlapping divs with opaque background [duplicate] - html

Question

This question already has answers here:
Why the content is not covered by the background of an overlapping element?
(8 answers)
Closed 3 years ago.
I have two divs with a background color, one overlapping the other. The problem is that I can see the content of the underlying div through the top div.
https://jsfiddle.net/jost_s/0dxwtbvn/23/
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
}
<div>AB</div>
<div class="overlapping">CD</div>

Answer 1

Use position: relative
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
margin-left: 50px;
margin-top: -50px;
border: 1px solid white;
position:relative;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>

Answer 2

Without a position property, they're not really overlapping in the context of the way the browser renders them.
There's probably a better explanation of why the second block overlaps the first block, but not it's content, but I'm sure it involves a deep understanding of how the rendering engine works. You might even get a different result in different browsers.
To get the desired effect, position the overlapping block instead of using the margin...
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
position: relative;
top: -50px;
left: 50px;
border: 1px solid white;
}
<div>
AB
</div>
<div class="overlapping">
CD
</div>

Answer 3

I would use transform: translate(); to position the elements instead of margin.
Since its triggering the stacking context and assure that the elements are "stacket" in the right way.
I cannot really explain why margin behaves in this way but maybe someone wants to educate me.
div {
background-color: lightblue;
width: 100px;
height: 100px;
font-size: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.overlapping {
border: 1px solid white;
transform: translate(50px, -50px);
}
<div>
<p>
AB
</p>
</div>
<div class="overlapping">
<p>
CD
</p>
</div>