0

Basically I have a part of html which for some reason it's child elements are displaying above of it's parent's siblings and I have no idea why.

.container {
  position: relative;
}

#greeting {
  background: red;
}

.thing-container {
  position: absolute;
  z-index: -1;
}

.things {
 height: 40px;
 width: 40px;
 background-color: black;
}
<div class="container">
  <div id="greeting">hello</div>

  <div class="thing-container">
    <div class="things"></div>
    <div class="things"></div>
  </div>
</div>

For some reason .things are displaying above #greeting

I tried to set the z-index of .things at -1 and that worked but why do I have to do it like that? I expected the parent to be able to maximize their z-index or something.

ATP
  • 2,939
  • 4
  • 13
  • 34
haiter
  • 1
  • 1
  • When I run your snippet, things appear below greeting. Can you describe a bit more what the problem is? Have you for example set top somewhere? – A Haworth Dec 31 '22 at 19:05

1 Answers1

-1

The default z-index for any element is greater than -1.

Hadi abdallah
  • 31
  • 1
  • 1
  • 8