133

Suppose I have this code:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

This jsFiddle: http://jsfiddle.net/ZjXMR/

Now, I need to have<div class="child"> in above of <div class="wholePage"> but in the jsFiddle you can see that the child element rendered before <div class="wholePage">.

If you remove the parent class position or z-index, everything works fine. This is the correct behavior that I need: http://jsfiddle.net/ZjXMR/1/

How can I do that with z-index and without removing anything from page?

1

6 Answers 6

107

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.

7
  • 1
    Thanks Kyle, but as I mentioned before, I have to solve the problem without removing anything. Apr 17, 2013 at 10:17
  • 12
    z-index isn't inherited.
    – BoltClock
    Apr 17, 2013 at 10:20
  • 42
    That's not inheritance. The z-index: 50 appears over z-index: 100 because the 1 and 50 are in the base stacking context, whereas 100 is in the stacking context of 1. Since 50 is greater than 1, 50 appears above 1 and everything in 1's context, but the 100 still retains a z-index of 100 within 1.
    – BoltClock
    Apr 17, 2013 at 10:50
  • 1
    Ok, here it is with 1, 2 and 3. jsfiddle.net/ykzEH/1 I've always understood that the parent element sets the z-index of all its children (I knew it wasn't inherited though.. Dunno why I wrote that :D)
    – Kyle
    Apr 17, 2013 at 10:52
  • 3
    @Kyle : If you don't know why you wrote that is not correct then edit the answer to be correct.
    – jimjim
    Feb 1, 2017 at 5:13
26

Nothing is impossible. Use the force.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
5
  • 34
    While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – gunr2171
    Dec 8, 2015 at 16:37
  • If we can't change the style of parent so this is a perfect solution to resolve problem. I tried and nice . thanks
    – huykon225
    Jan 23, 2019 at 4:42
  • 2
    > If you remove the parent class position or z-index, everything works fine. You've just removed the parent z-index, which I believe the OP couldn't modify.
    – EoghanM
    Oct 30, 2019 at 9:22
  • position:relative changed the stacking order of parent. I think it is probably because relative make 'parent' step out of the current page structure. Check out this:developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/…
    – MING WU
    Oct 24, 2020 at 6:55
  • 2
    Alternatively, set parent z-index to auto.
    – thdoan
    Feb 23, 2021 at 2:14
11

To achieve what you want without removing any styles you have to make the z-index of the '.parent' class bigger then the '.wholePage' class.

.parent {
    position: relative;
    z-index: 4; /*matters since it's sibling to wholePage*/
}

.child {
    position: relative;
    z-index:1; /*doesn't matter */
    background-color: white;
    padding: 5px;
}

jsFiddle: http://jsfiddle.net/ZjXMR/2/

8

Give the parent z-index: -1, or opacity: 0.99

5
  • 37
    If people are wondering what the opacity:0.99 is all about I suggest you read this link. philipwalton.com/articles/what-no-one-told-you-about-z-index
    – johnsnails
    Oct 21, 2013 at 2:14
  • This seems not to work in IE 11
    – Benedikt
    Sep 6, 2017 at 12:07
  • 5
    EVERYBODY ON THIS PAGE SHOULD READ THE ARTICLE LINKED IN THE PREVIOUS COMMENT! Seriously, everything you need to know about z-index - very helpful stuff, with some real silver bullets sprinkled in the mix too. Dec 13, 2018 at 19:23
  • This solved the problem for me when I had 3 parents divs and 3 child divs in each parent. So, all 9 divs are stacked together. But, made translateZ problematic on children.
    – Rehmat
    Jun 9, 2022 at 11:54
  • 1
    CSS has now a dedicated property just for creating a new stacking context: isolation (developer.mozilla.org/en-US/docs/Web/CSS/isolation).
    – strarsis
    Apr 4, 2023 at 17:48
5

Use non-static position along with greater z-index in child element:

.parent {
    position: absolute
    z-index: 100;
}

.child {
    position: relative;
    z-index: 101;
}
1
  • 1
    To elaborate a little on the "Use non-static position", the default behavior for elements that have no position property specified will default to "static." Reading about Static. This lacks functionality around things like the left, right, bottom and top until given a position, the same applies for z-index.
    – Clay
    Aug 21, 2018 at 17:35
5

Try using this code, it worked for me:

z-index: unset;
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.