Z-Index Inherits Parents Z-Index , or Not

How to make child element higher z-index than parent?

This is impossible as a child's z-index is set to the same stacking index as its parent.

You have already solved the problem by removing the z-index from the parent, keep it like this or make the element a sibling instead of a child.

Is position: fixed z-index relative to its parent's z-index?

In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.

Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.

Changing HTML options

The first option is to move inner outside of outer, which would look like this.

The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.

A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.

Changing CSS options

The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).

---

Explanation

If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.

Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.

D difference between z-index's auto and inherited in CSS3

z-index is not inherited; the default value for every element is auto. If you change it to be inherit then it will grab the value from its parent directly.

The key is that auto does not create a new local stacking context, while inherit, if the parent had any numerical value, will indeed.

Please check this example to get a better understanding. You can see the same DOM structure is duplicated. On the first scenario, div auto comes before inherit and on the other one; it's inverted.

You can see that the inherit value works equally as actually setting z-index: <number> equal to the parent, while auto is the default value that does not create a new stacking order and will simply display on the default z order as per determinated on the DOM. If you make the parent's value -1, then the inheritance will be exactly as if you set z-index: -1 on .inherit making it display behind .auto on both divs.

$('#button0').click(function(e){  $('.parent').css('z-index', '0');});$('#button1').click(function(e){  $('.parent').css('z-index', '1');});$('#button-1').click(function(e){  $('.parent').css('z-index', '-1');});

.parent{  position: relative;  z-index: 1;}.parent > div{  position: absolute;}.auto{  z-index: auto; /* default value */}.inherit{  z-index: inherit;  }
/* --------------------- *//* presentational styles */.auto{  background: green;}.inherit{  top: 100px;  background: red;}.parent{  width: 200px;  height: 200px;  opacity: 1;  margin: 10px;  background: yellow;  display: inline-block;}.parent > div{  width: 100px;  height: 100px;  opacity: 0.95;  color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="parent">  first auto and then inherit on DOM  <div class="auto">auto</div>  <div class="inherit">inherit</div></div>
<div class="parent">  first inherit and then auto on DOM  <div class="inherit">inherit</div>  <div class="auto">auto</div></div>
<div>  <label>Change z-index of parent</label>  <button id="button-1">To -1</button>  <button id="button0">To 0</button>  <button id="button1">To 1</button></div>

How does parent's z-index affect the child's z-index?

By default, all background colour goes behind the text. the z-index default is auto which states "Sets the stack order equal to its parents". However, using z-index on the child will move it out of the natural stack order and place it behind the background. If you change the parent to also have a Z-Index then it will rejoin the stack and the background colour will again appear behind the text.

Both parent and child are set to AUTO. Both in the same stack.

#parent {  position: absolute;  background: red;  width: 100px;  height: 100px;}
#child {  position: absolute;  top: 50px;  left: 50px;  transform: translateX(20px);}

<div id="parent">  <div>   qqq  </div>  <div id="child" >    test  </div></div>

Is there any way to place z-index according not to its parent element

I would say it depends on each situation but the answer is yes if you avoid creating a stacking context with the parent element. In other words, the parent element and child element need to belong to the same stacking context to be able to place the child element below its parent.

Here is some examples to better explain:

Why can't an element with a z-index value cover its child?

css z-index issue with nested elements

How can I display a header element above my content?

I have position but z index is not working

By the way, you can create your actual shape with an easier way and avoid any complex situation involving z-index

.netflix {  width:100px;  height:200px;  display: inline-block;  background:     linear-gradient(#e50914,#e50914) left/20px 100%,    linear-gradient(#e50914,#e50914) right/20px 100%;  background-repeat:no-repeat;  margin: 20px;  z-index:0;  position:relative;  overflow:hidden;}
.netflix:before {  content:"";  position:absolute;  top:0;  left:0;  height:100%;  width:20px;  transform: skewX(22deg);  background:#e50914;  transform-origin:top left;  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.6);}

<div class="netflix">  </div>

Why can't an element with a z-index value cover its child?

There are two important things you need to know: the painting order and the stacking context. If you refer to the specification, you can find how and when elements are painted.

3. Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

---

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories:

   1. All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

---

9. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.

It's clear from this that we first paint elements with negative z-index at step (3), then the one with z-index equal to 0 at step (8), and finally the ones with positive z-index at step (9), which is logical. We can also read in another part of the specification:

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.

---

To understand when each element will be painted you need to know its stacking context and its stack level inside this stacking context (defined by z-index). You also need to know whether that element establishes a stacking context. This is the tricky part, because setting z-index will do this:

For a positioned box, the z-index property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a stacking context

Values have the following meanings:

<integer>

This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context.

auto

The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

---

Now we have all the information to better understand each case. If the parent element has a z-index value of something other than auto, then it will create a stacking context, thus the child element will be painted inside whatever their z-index is (negative or positive). The z-index of the child element will simply tell us the order of painting inside the parent element (this covers your second point).

Now, if only the child element has a positive z-index and we set nothing on the parent element, then considering the painting order, the child will be painted later (in step (9)) and the parent in step (8). The only logical way to paint the parent above is to increase the z-index, but doing this will make us fall into the previous case where the parent will establish a stacking context and the child element will belong to it.

There is no way to have the parent above a child element when setting a positive z-index to the child. Also there is no way to have the parent above the child if we set a z-index to the parent element different from auto (either positive or negative).¹

The only case where we can have a child below its parent is to set a negative z-index on the child element and keep the parent at z-index: auto, thus this one will not create a stacking context and following the painting order the child will be painted first.

---

In addition to z-index, there are other properties that create a stacking context. In case you face an expected stacking order, you need to consider those properties, too, in order to see if there is a stacking context created.

---

Some important facts that we can conclude from the above:

1. Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
2. Each stacking context is completely independent of its siblings: only descendant elements are considered when stacking is processed.
3. Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. ^ref

---

¹: there is some hacky ways if we consider the use of 3D transformation.

Example with an element going under its parent element even if this one has a z-index specified.

.box {
  position:relative;
  z-index:0;
  height:80px;
  background:blue;
  transform-style: preserve-3d; /* This is important */
}
.box > div {
  margin:0 50px;
  height:100px;
  background:red; 
  z-index:-1; /* this will do nothing */
  transform:translateZ(-1px); /* this will do the magic */
}

<div class="box">
  <div></div>
</div>

z-index not working with elements whose parents are in fixed position

The simple solution is that what I'm trying to do is simply impassible.

The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.

The order of elements is called the Stacking Order, the stacking order is:

1. If no z-index or position then the stacking order is as the html markup order.

2. All positioned elements (relative, absolute and fixed) appear on top of all none positioned elements (static).

3. z-index works only on positioned elements, and it will create Stacking Context.

Stacking Context

Group of elements with common parent create Stacking Context if one of the next conditions are meet:

1. The root document element (the <html> element).

2. Positioned element with z-index

3. Element with opacity less the 1 (this isn't known by most of web developers)

All the elements in Stacking Context move together in the stacking order,
meaning that if element a inside staking context A, can't be above element b inside staking context B, if the stacking order of B is higher the A,
even if the element 'a' has z-index of a million.

Update: new css roles that create Stacking context: transform, filter, css-region and pages_media.

The order inside the Stacking Context:

1. root element

2. positioned element with negative z-index.

3. none positioned elements in the order of the html markup

4. positioned elements

5. positioned elements with z-index according to the z-index.

• Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
  
• Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
  
• Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
  since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.

To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.

Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

can I override z-index inheritance from parent element?

I believe z-index is relative to the nearest positioned element. So, if you had two divs inside the "1111" div, they could be z-index'd relative to each other, but since 2222 is a child of 1111, it cannot be z-indexed relative to 0000, and will always be above 1111.

---

Related Topics