0

If you have two div's at least and they have background colors and some content on it and you give the last one a negative margin top this will make the last one overlapping on the top of the first one but not the text still see through.

I know making new stack context will solve the problem but it looks unexpected according to what I'm understanding from MDN rules I read.

I'm trying to understand how the browser layering elements of none-positioned elements when no z-index used

in the example below the green div looks like hiding the red div except the text

shouldn't hide the entire div with text too ?

.box{
  width: 440px;
  height: 50px;
}

.red{
  background-color:red;
}
.green{
  background-color:green;
  margin-top:-50px;
}
<div class="box red">Hello</div>
<div class="box green">_____world</div>
Ayman Morsy
  • 1,279
  • 1
  • 10
  • 28

0 Answers0