web-dev-qa-db-ja.com

z-indexが機能しないのはなぜですか？

したがって、z-indexを正しく理解すれば、この状況では完璧になります。

enter image description here

下の画像（タグ/カード）をその上のdivの下に配置したい。そのため、鋭いエッジが見えません。どうすればいいですか？

z-index:-1 // on the image tag/card

または

z-index:100 // on the div above

動作しません。また、このようなものの組み合わせも行いません。どうして？

htmlcsscss3z-index
146
Linkjuice57

z-index プロパティは、position以外の static 値を持つ要素でのみ機能します（例：position: absolute;、position: relative;、またはposition: fixed）。

Firefoxでサポートされているposition: sticky;もあり、Safariでプレフィックスが付けられ、Chromeの古いバージョンではカスタムフラグの下でしばらく動作し、MicrosoftがEdgeブラウザに追加することを検討中です。

356
Evert

位置をstatic以外の値に設定しても、要素のz-indexがまだ機能しないように見える場合は、一部の親要素にz-indexが設定されている可能性があります。

スタッキングコンテキストには階層があり、各スタッキングコンテキストは、親のスタッキングコンテキストのスタッキング順序で考慮されます。

だから次のhtmlで

div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

z-indexのel3がどれだけ大きく設定されても、親のスタックコンテキストが低いため、常にel1の下になります。 el3のスタック順序が実際には3.8であり、5。

親要素のスタッキングコンテキストを確認する場合は、これを使用できます。

var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
    var styles = window.getComputedStyle(el);
    console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));

MDNでのコンテキストのスタックに関する素晴らしい記事があります

43
Buksy

要素には位置属性が必要です。 （例：絶対、相対、固定）またはz-indexは機能しません

25
clem

多くの場合、z-indexが機能するには要素を配置する必要があります。

実際、問題の要素にposition: relativeを適用することで問題が解決する可能性があります（ただし、確実に知るには十分なコードが提供されていません）。

実際、position: fixed、position: absolute、およびposition: stickyもz-indexを有効にしますが、これらの値はレイアウトも変更します。 position: relativeを使用すると、レイアウトは乱れません。

基本的に、要素がposition: static（デフォルト設定）でない限り、配置されていると見なされ、z-indexが機能します。

「なぜz-indexが機能しないのか？」の質問に対する多くの回答は、z-indexonlyが配置された要素で機能すると主張しています。 CSS3の時点では、これはもはや真実ではありません。

flex items または グリッド項目 は、positionがstaticであってもz-indexを使用できます。

仕様から：

4.3。FlexアイテムのZオーダー

Flexアイテムは、インラインブロックとまったく同じようにペイントします。ただし、未処理のドキュメント順序の代わりに順序が変更されたドキュメント順序が使用され、auto以外のz-index値は、positionがstaticであってもスタックコンテキストを作成します。

5.4。Z軸の順序：z-indexプロパティ

グリッド項目の描画順序はインラインブロックとまったく同じです。ただし、未処理の文書順序の代わりに順序が変更された文書順序が使用され、auto以外のz-index値はpositionがstaticであってもスタックコンテキストを作成します。

以下は、z-indexが非位置指定フレックスアイテムで動作するデモです。 https://jsfiddle.net/m0wddwxs/

19
Michael_B