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

だから私がz-index正しく理解していれば、この状況では完璧です：

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

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

または

z-index:100 // on the div above

どちらも機能しません。また、このような組み合わせもありません。どうして？

z-indexプロパティは、のみを持つ要素上で動作position以外の値static（例えばposition: absolute;、position: relative;またはposition: fixed）。

またposition: sticky;、Firefoxでサポートされ、Safariでプレフィックスが付けられ、以前のバージョンのChromeではカスタムフラグの下で機能し、MicrosoftがEdgeブラウザーに追加することを検討中です。

重要
通常の配置のposition: relative場合は、も設定する要素に含めるようにしてくださいz-index。そうしないと、有効になりません。

位置を以外の値に設定しても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でのコンテキストのスタックに関する素晴らしい記事があります

要素にはposition属性が必要です。（例えばabsolute、relative、fixed）、またはz-index動作しません。

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

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

実際には、position: fixed、position: absoluteとposition: stickyも可能になりますz-indexが、これらの値は、レイアウトを変更します。position: relativeレイアウト乱されることはありません。

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

「Z-indexが機能しないのはなぜですか？」に対する多くの回答 質問は、配置された要素でz-index のみ機能すると主張します。CSS3以降、これは当てはまりません。

ある要素フレックス項目またはグリッドのアイテムを使用することができz-indexたとしてもpositionですstatic。

スペックから：

4.3。フレックスアイテムのZオーダー

フレックスアイテムは、生文書順の代わりに使用されるため、変更された文書の順序を除いて、正確に、インラインブロックと同じペイント、およびz-index以外の値autoとしてもスタッキングコンテキストを作成しpositionていますstatic。

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

グリッド項目の塗装順序は正確生文書順の代わりに使用されるため、変更された文書の順序を除いて、インラインブロックと同じであり、そしてz-index以外の値autoとしてもスタッキングコンテキストを作成し positionていますstatic。

以下は、z-index配置されていないフレックスアイテムでの作業のデモンストレーションです。https：//jsfiddle.net/m0wddwxs/