web-dev-qa-db-ja.com

要素の下で:: afterを使用する場合のz-index

z-indexとposition: absolute;を組み合わせて使用​​すると、要素の下に::beforeを配置できます。 別の質問 （ jsfiddle.net/Ldtfpvxy ）の良い例があります。

基本的に

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

レンダリング：

enter image description here

したがって、スタッキングコンテキスト/順序はz-indexによって定義されます。しかし、z-index: 1;を要素に、z-index: -1;をその::beforeに適用すると、同じことを達成できません。

要素からz-indexを省略した場合のみ。

これはなぜですか？要素は::beforeおよび::after擬似の後にレンダリングされ、同じz-indexを取得しますか？

動作：https://jsfiddle.net/Ldtfpvxy/
機能しません：https://jsfiddle.net/Ldtfpvxy/1/ （追加されたz-index: 1; to element）

cssz-indexpseudo-element
16
Sergio

Divとその:: after疑似要素は、同じスタックコンテキスト（この場合はルートスタックコンテキスト）のメンバーです。擬似要素に指定する新しいスタックコンテキストは、その子（存在しない）への参照として使用されますが、z-index値は現在のスタックコンテキストに適用されます。そして CSS仕様 は、各スタッキングコンテキストに対して次のペイント順序を指示します。

各スタッキングコンテキスト内では、次のレイヤーが後ろから前の順序で描画されます。

  1. スタックコンテキストを形成する要素の背景と境界。
  2. スタックレベルが負の子スタックコンテキスト（最初は負）。
  3. インフロー、非インラインレベル、非配置子孫。
  4. 配置されていないフロート。
  5. インラインテーブルおよびインラインブロックを含む、インフロー、インラインレベル、非配置の子孫。
  6. スタックレベル0の子スタックコンテキストとスタックレベル0の配置された子孫.
  7. スタックレベルが正の子スタックコンテキスト（最初に正の最小）。

見て、負のスタックレベルの子スタックコンテキスト、たとえばdiv::afterの前にペイントされますスタックレベル0の配置された子孫、div自体。これは、気づいた動作を説明しています。

17
bfavaretto

z-indexを指定すると、新しいスタックコンテンツが作成されます。

これが子::after疑似要素でのみ行われる場合、親は新しいスタックコンテンツを確立せず、すべてが期待どおりに動作します。

ただし、親要素にz-indexを追加すると、新しいスタックが開始されます（子スタックもラップされます。）。
そして、 スタックレンダリング指定 の最初の2つのポイントを見ると、他の子スタックの前に背景がレンダリングされることがわかります。

各スタッキングコンテキスト内では、次のレイヤーが後ろから前の順序で描画されます。

  1. backgroundおよびスタックコンテキストを形成する要素の境界線。
  2. スタックレベルが負の子スタックコンテキスト（最も負が最初）。
  3. ... ...

ここに例があります 、ネストされたスタッキング背景の異なるレンダリング動作を明確にするため。

position: relativeはオプションではありません;デフォルトのposition:staticでは、z-indexは効果がありません。

6
maioman