使孩子的z索引比父母高

Question

Basically I'm looking to do this, but this doesn't work. How can I achieve the desired result without having to move it to a different place in the DOM?

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

#parent {
  z-index: -1
}
#child {
  z-index: 999999;
  position: absolute
}

Answer 1

Here it is:

#parent {
    position: relative;
    z-index: 1;
}

#child {
    position: relative;
    z-index: 5;
}

Answer 2

1. Child is always on top of the parent by default;
2. z-index requires non-static position property for proper working.

Answer 3

Try setting relative position on the parent, and absolute position on the child with offset values all set to 0 .

#parent {
  position: relative;
}
#child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

Answer 4

1.) The parent needs to have position: relative (or fixed, or absolute)

2.) The child needs to have position: absolute and defined width/height, and/or optionally settings for top/bottom/right/left as desired.

In this simple configuration you don't need any z-index at all - the child is above the parent. In more complex situations you can use z-index.

 #parent { position: relative; background: blue; width: 600px; height: 500px; } #child { position: absolute; background:red; width: 400px; height: 300px; left: 100px; top: 100px; } 

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