How to make child element upper than parent with z-index

问题:

Suppose I have this code:

     
         Hello world     
 
  
 

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

Now, I need to have

in above of

but in the jsFiddle you can see that the child element rendered before

.

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:

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.

回答2:

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/

回答3:

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

回答4:

Nothing is impossible. Use the force.

.parent {     position: relative; }  .child {     position: absolute;     top:0;     left: 0;     right: 0;     bottom: 0;     z-index: 100; } 

回答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; } 

回答6:

I had the same issue. What I did was just add position: relative; and z-index: 1; to child div.

.child-div {     position: relative;     z-index: 1; /*or greater*/ } 

文章来源: How to make child element upper than parent with z-index