☰

疑似要素のスタック順序を親要素の下に設定することは可能ですか? [重複] 質問する

tag-icon • tag-icon css z-index pseudo-element
疑似要素のスタック順序を親要素の下に設定することは可能ですか? [重複] 質問する

:after疑似要素CSSセレクターを使用して要素をスタイル設定しようとしています

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

::after要素は要素自体よりも低くすることはできないようです。

疑似要素を要素自体よりも低くする方法はありますか?

ベストアンサー1

擬似要素関連する要素の子孫として扱われます。疑似要素を親の下に配置するには、新しいスタッキングコンテキストデフォルトのスタック順序を変更します。
疑似要素 (絶対) を配置し、「auto」以外の z-index 値を割り当てると、新しいスタック コンテキストが作成されます。

#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 */
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Position a pseudo-element below its parent</title>
</head>
<body>
  <div id="element">
  </div>
</body>
</html>

おすすめ記事