Ist z-index keine dominante?

Question

Was ich versuche zu sagen ist, dass WARUMz-index ignoriert wird, wenn in dieser 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 kann oben auf #IAmDown nur, wenn ich die IAmDown-z-index: -1 aber in diesem Fall die parent div auch oben auf IAmDown wird gesetzt, und ich will nicht, dass. Alles, was ich will, ist, dass die grüne Box oben auf der roten Box und die rote Box oben auf der blauen ist.

Gibt es eine Lösung für dieses beiseite aus dem grünen Feld bewegen außerhalb es Eltern oder EDIT die HTML?

Ich bin mit der Verwendung von JavaScript (nicht wirklich auf JQuery) bei der Manipulation dieser, aber ich weiß nicht wie. Hilfe? Diese

Answer 1

ist eine der gefürchteten Stapelindex Probleme: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Sobald Sie ein Element mit der Positionierung erstellen: fest, sind Sie einen neuen Stapelkontext zu schaffen. Sie können Elemente zwischen Stapelkontexten nicht mischen.

Sie müssen Ihr Markup leider ändern.

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

Answer 2

Dies funktioniert. Wir machten eine Änderung 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

Seine Eltern (#parent) nicht über einen Z-Index, das ist der Grund. Wenn Sie eine hinzufügen, die größer ist als die von #IAmDown, es wie erwartet ändert:

#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

Hier ist eine zweite Antwort ist, die eine Lösung enthält, wie Sie im Kommentar zu meiner ersten Antwort angefordert. Alle Elemente haben Position fixiert, und die grüne aus dem roten bewegt:

#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>