z-indexは支配的ではありませんか？

Question

私が言っているのは、この状況ではWHYはz-indexです。

#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私はz-index: -1にIAmDownを設定するが、この場合にはparent div要素もIAmDownの上になり、私はそれをしたくない場合にのみ#IAmDownの上にすることができます。 私が望むのは、グリーンボックスがレッドボックスの上にあり、レッドボックスがブルーのボックスの上にあることです。

その親、またはEDIT HTMLの外側グリーンボックスを移動するから別にこのへの解決策はありますか？

私は、これを操作するにはJavaScriptを使用していますが（実際はJQuery上ではありませんが）、私はどのようにするのか分かりません。助けて？

Answer 1

これは恐ろしいスタッキングインデックスの問題の1つです。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context position：fixedで要素を作成すると、新しいスタッキングコンテキストが作成されます。スタッキングコンテキスト間で要素をシャッフルすることはできません。

残念ながら、マークアップを変更する必要があります。

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

Answer 2

これは機能します。 、

#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

その親（#parent）はZインデックスを持っていないhtml

の変化をしたことが理由です。あなたが#IAmDownの1以上である1を追加した場合、予想通り、それが変更されます。

#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

ここでは、私の最初の答えにコメントして要求されたように、溶液を含む第2の答えがあります。すべての要素は、位置を固定している、と緑1、赤1の外に移動されます。

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