0

Stacking contexts

As you can see in the image I have the following structure:

#container {
  background-color: yellow;
  position: relative;
}

#child1 {
  background-color: greenyellow;
  position: absolute;
  top: 0;
}

#child1a {
  background-color: green;
  z-index: 40;
}

#child2 {
  position: absolute;
  z-index: 1;
  background-color: violet;
}
<div id="container">
  <div id="child1">
    <div id="child1a" />
  </div>

  <div id="child2" />
</div>

As I understand, child1 should not create a new stacking context since I do not specify z-index. Therefore the parent stacking context of child1a should be same as the parent context for child2 and since the z-index of child1a is bigger than that of child2 is should be above child2, what am I missing here?

j08691
  • 204,283
  • 31
  • 260
  • 272
Alym Sagymbaev
  • 31
  • 2
  • 5
  • you didn't set position for child1a – Temani Afif Jun 17 '20 at 15:00
  • it depends on the browser, it's not standardize, the z-index system used in chrome for example use a "relative" rule (child z-index is relative to the parent z-index) where other browser (IE) uses an absolute z-index (z-index: 999 is the same thing for each element on the page) – Alberto Sinigaglia Jun 17 '20 at 15:00
  • `z-index` only works on positioned elements. That is, elements with a `position` other than the default of `static` – j08691 Jun 17 '20 at 15:00
  • @Berto99 it doesn't depend on browser and there is a whole Spec detailing this so it's a standard that all the browser should follow: https://www.w3.org/TR/CSS2/zindex.html – Temani Afif Jun 17 '20 at 15:05
  • Thank you! Now everything is on its own place – Alym Sagymbaev Jun 17 '20 at 15:06

0 Answers0