擬似要素を親要素の下に積み重ねることはできますか?

擬似要素のスタック順序は親の下に移動できますか?

CSS では、:after および :before 擬似要素は、関連する要素のコンテンツの前後に表示されます。 。デフォルトのスタック順序では擬似要素が親の上に配置されますが、特定のシナリオでは逆転が必要です。

問題:

擬似要素の z-index プロパティを設定しようとしています-要素が親要素よりも下にあると、多くの場合、上に表示されます。

解決策:

擬似要素をその親の下に配置するには、新しいスタッキング コンテキストを作成します。

1. Absolute Positioning: 擬似要素をposition:Absoluteに設定すると、新しいスタッキングコンテキストが確立され、有効になります。 z-index control.
2. Z-Index Assignment: 親の Z-インデックスよりも低い Z-インデックス値を割り当てて、擬似要素を下に配置します

例:

#element {
  position: relative;  /* optional */
  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 */
}

このアプローチでは、積み重ね順序をきめ細かく制御できるため、擬似的に希望の位置を達成できます。関連する親に相対的な要素。

以上が擬似要素を親要素の下に積み重ねることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。