z-index不是主导吗？

Question

What I'm trying to say is that WHY is z-index ignored when in this situation?

 #IAmGreater{ position:fixed; z-index: 999!important; background-color: green; height: 50px; width: 50px; top: 0; left: 0; } #parent{ background-color: blue; height: 200px; width: 200px; position: fixed; margin: 50px; } #IAmDown{ position: absolute; z-index: 0; background-color:red; height:100px; width: 100px; } 

 <div id="parent"> <span id="IAmGreater"></span> </div> <div id="IAmDown"> </div> 

#IAmGreater can only be on top of #IAmDown if I set the IAmDown to z-index: -1 but in this case the parent div will also be on top of IAmDown and I don't want that. All I want is that the Green box be on top of the Red box and the Red box is on top of the blue one.

Is there any solution to this aside from moving the Green box outside of it's parent, or EDIT the HTML?

I'm down with using JavaScript (not really on JQuery) in manipulating this but i don't know how to. Help?

Answer 1

This is one of the dreaded stacking index problems: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Once you create an element with positioning: fixed, you're creating a new stacking context. You can't shuffle elements between stacking contexts.

You need to change your markup, unfortunately.

<div id="newParent">
 <div id="oldParent"></div>
 <span id="IAmGreater"></span>
</div>
 <div id="IAmDown">
</div>

Answer 2

This works. Made a change in html

 #IAmGreater{ position:fixed; z-index: 1000; background-color: green; height: 50px; width: 50px; top: 0; left: 0; } #parent{ background-color: blue; height: 200px; width: 200px; position: fixed; z-index: -1; margin: 50px; } #IAmDown{ position: absolute; background-color:red; height:100px; width: 100px; z-index: 0; } 

 <div id="parent"></div> <span id="IAmGreater"></span> <div id="IAmDown"> </div> 

Answer 3

Its parent ( #parent ) doesn't have a z-index, that's why. If you add one which is greater than the one of #IAmDown , it changes as expected:

 #IAmGreater{ position:fixed; z-index: 999!important; background-color: green; height: 50px; width: 50px; top: 0; left: 0; } #parent{ background-color: blue; height: 200px; width: 200px; position: fixed; margin: 50px; z-index:1; } #IAmDown{ position: absolute; z-index: 0; background-color:red; height:100px; width: 100px; } 

 <div id="parent"> <span id="IAmGreater"></span> </div> <div id="IAmDown"> </div> 

Answer 4

Here's a second answer that contains a solution as you requested in the comment to my first answer. All elements have fixed position, and the green one is moved out of the red one:

 #IAmGreater{ position:fixed; z-index: 999!important; background-color: green; height: 50px; width: 50px; top: 0; left: 0; } #parent{ background-color: blue; height: 200px; width: 200px; position: fixed; margin: 50px; } #IAmDown{ position: fixed; z-index: 0; background-color:red; height:100px; width: 100px; } 

 <div id="parent"> </div> <span id="IAmGreater"></span> <div id="IAmDown"> </div>