0

w3c は、z-index は「配置された要素 (位置: 絶対;、位置: 相対; または位置: 固定;) でのみ機能する」と述べています。

絶対位置で動作することがわかります: http://jsfiddle.net/WwXVV/2/
しかし、なぜ相対位置で動作しないのですか: http://jsfiddle.net/WwXVV/

相対的な位置で、この特定のケースでは、より高い z-index を持つ div が上にない理由を誰かが説明できますか?

CSS:

#top {
    position:relative;
    float:left;
    width:100px; height:100px;
    background-color:yellow;
    z-index:1; 
}

#bottom {
    position:relative;
    float:left;
    width:100px; height:100px;
    background-color:blue; 
    z-index:0;
}

HTML:

<div id="top"></div>
<div id="bottom"></div>
4

4 に答える 4

1

それらを隣り合わせに浮かせているだけです。left下の div に適用します。

#bottom { left: -100px; }

これが行うことは、一番上の div の下に一番下の div を「配置」することです。相対位置を適用しても何も起こりません。スタッキング効果を確認するには、ターゲット要素を動かし始める必要があります。

絶対配置について疑問がある場合は、動作が異なります。絶対配置は、要素をドキュメント フローから外し (つまり、他の要素のレイアウトには影響しません)、既定では、値を持たない最初の祖先の左上に配置するposition:staticため、両方の要素が積み上げられます。お互いの上に。

于 2013-09-11T12:55:49.080 に答える
0

float両方の要素を左側に編集しました。それらは重複しないため、z-index何もしません。

右のボックスに追加margin-left: -20pxすると、目的の効果が表示されます。

于 2013-09-11T12:56:13.460 に答える
0

シンプルで、position:relativeとfloat:left;div が隣り合っています。position: absolute彼らは無視し、float:left;両方の要素を同じ場所に配置し、z-index を使用して誰が前にいるかを示します。

z-indexは、ボックスが視覚的に重なっている場合にのみ関連します。

于 2013-09-11T12:57:05.327 に答える