Understanding z-index: How does this element appear in front of its parent's sibling?

Question

Why is the red div in front of the green div when I remove z-index from .wrapperRed?

It feels like z-index is inherited up the chain.

If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}

.red {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: red;
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

<div class="wrapperRed">
  <div class="red"></div>
</div>
<div class="green"></div>

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context — j08691, Jul 11 '16 at 15:22

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

When you remove z-index from .wrapperRed, the element defaults to z-index: auto.

In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).

Learn more about z-index and stacking contexts here: Basics of the CSS z-index property

edited May 23 '17 at 11:44

Community

1
1

answered Jul 11 '16 at 15:21

Michael Benjamin

346,931
104
581
701

2

Keep in mind that while ancestor boxes and descendant boxes in the same stacking context have a set painting order, that does not imply that the ancestors establish stacking contexts for their descendants. These are two distinct concepts, and it's why strange effects like this can be observed when toggling the z-index declaration on an ancestor of a descendant with its own z-index. The only thing controlling whether or not .wrapperRed establishes or does not establish a stacking context, is whether its computed z-index is auto. (And note that stack level is not the same as computed z-index.) – BoltClock Jul 11 '16 at 16:01

Rounin · Answer 2 · 2016-07-11T16:25:14.983

Why is the .red div in front of the green div when I remove z-index from .wrapperRed?

Because .red no longer has a parental z-index to constrain it.

ie.

Before: .red has a z-index of 5 within a parental z-index of 1.

After: .red has a global z-index of 5.

N.B. In both Before and After cases, .wrapperRed is always behind .green. But, when it is unconstrained, .red (which is 100% the width and height of .wrapperRed) appears in front of .green.

You can see this more easily if you give the parent and child divs different background colours and make the child div smaller than the parent.

Compare:

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
  z-index: 1;
}

.yellow {
  position: absolute;
  height: 75%;
  width: 75%;
  background-color: yellow;
  
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  
  z-index: 1;
}

<div class="wrapperRed">
  <div class="yellow">
  </div>
</div>

<div class="green"></div>

with:

.wrapperRed {
  height: 200px;
  width: 200px;
  position: absolute;
  background-color: red;
}

.yellow {
  position: absolute;
  height: 75%;
  width: 75%;
  background-color: yellow;
  
  z-index: 5;
}

.green {
  height: 200px;
  width: 200px;
  background-color: green;
  position: absolute;
  top: 100px;
  left: 100px;
  
  z-index: 1;
}

<div class="wrapperRed">
  <div class="yellow">
  </div>
</div>

<div class="green"></div>

Understanding z-index: How does this element appear in front of its parent's sibling?

2 Answers2

Linked