There are two div 's, the second one has a margin-top: -50px css-property margin-top: -50px . But it turns out that the first div is located above the second (higher along the z axis). Why is that?

 #a { font-size: 70px; } #b { margin-top: -50px; } 
 <div id="a">a</div> <div id="b">Lorem ipsum dolor sit amet</div>

It would seem that statically positioned elements should be located along the z axis in the order of their appearance in html

  • one
    If you make the letter A red, you will see that the text is visible on top. If you make a background to a text, you will see that the second div still covers the first one. - mJeevas
  • one
    The letters simply merge because of the same color, and it seems that A is higher because of the illusion - mJeevas
  • @mJeevas, yes, for sure. Thank! - diraria

1 answer 1

It seems so to you, actually the block #b higher than the block #a . Here is an example:

 #a { font-size: 70px; color: red; font-weight: bold; } #b { margin-top: -50px; } 
 <div id="a">a</div> <div id="b">Lorem ipsum dolor sit amet</div>