回答編集履歴
1
さらに引用部を伸ばしたほうがわかりやすかったので追加
answer
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
`z-index`がかかった要素は、それ自体が**スタックコンテキスト**（重ね合わせコンテキスト）を生成します。
|
|
2
2
|
|
|
3
|
-
> 重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。（[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)より）
|
|
3
|
+
> 重ね合わせコンテキストの内部で、子要素は前に説明した規則に従って重ね合わせられます。重要なのは、子要素の `z-index` 値は、その親要素に対してのみ意味を持つということです。重ね合わせコンテキストは、その親の重ね合わせコンテキストでは不可分な一つの固まりとして扱われます。（[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)より）
|
|
4
4
|
|
|
5
5
|
なので、`#blue`に`z-index`をかけてしまうと、`#blue`と子要素の`#yellow`を含んだスタックコンテキストとなるため、両者の間に別なものを挟み込むことはできなくなります。
|
|
6
6
|
|