web-dev-qa-db-ja.com

擬似要素のスタック順を親要素の下に設定することは可能ですか？

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

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

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

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

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

cssz-indexpseudo-element
242
adardesign

Pseudo-elements は、それに関連する要素の子孫として扱われます。擬似要素をその親の下に配置するには、デフォルトのスタック順を変更するために 新しいスタッキングコンテキスト を作成する必要があります。
擬似要素（絶対）を配置し、 "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>
308
Arley

私はこれが古いスレッドであることを知っています、しかし私は適切な答えを投稿する必要性を感じます。この質問に対する実際の答えは、擬似要素を持つ要素の親に新しいスタッキングコンテキストを作成する必要があるということです（実際には、単に位置ではなくzインデックスを指定する必要があります）。

このような：

#parent {
    position: relative;
    z-index: 1;
}
#pseudo-parent {
    position: absolute;
    /* no z-index allowed */
}
#pseudo-parent:after {
    position: absolute;
    top:0;
    z-index: -1;
}

疑似要素の：beforeまたは：afterを使用しても関係ありません。

#parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }

/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }
<div id="parent">
 <div id="pseudo-parent">
   &nbsp;
 </div>
</div>
230
Adam

やってみよう

el {
  transform-style: preserve-3d;
}
el:after {
  transform: translateZ(-1px);
}
33
Eugen Govorun

ここには2つの問題があります。

  1. CSS 2.1の仕様では、「:beforeおよび:after疑似要素要素は、それらが関連付けられた要素のすぐ内側に挿入された実際の要素であるかのように、他のボックス（慣らし場ボックスなど）と対話します。」ほとんどのブラウザでz-indexが実装されている方法を考えると、すべてのブラウザで機能するDOM内の親要素のz-indexよりもコンテンツを移動するのはかなり困難です（読んで、私は方法がわかりません）。

  2. 上記の番号1は必ずしも不可能というわけではありませんが、それに対する2番目の障害は実際にはさらに悪いことです。最終的にはブラウザのサポートの問題です。 FirefoxはFF3.6までは生成されたコンテンツの配置をまったくサポートしていませんでした。誰がIEのようなブラウザについて知っています。そのため、1つのブラウザで動作させるためのハックが見つかったとしても、そのブラウザでしか動作しない可能性が非常に高いです。

私が考えることができる唯一のことは、ブラウザを越えてうまくいくだろうことは、CSSではなくjavascriptを使って要素を挿入することです。それは素晴らしい解決策ではないことを私は知っていますが、:beforeと:after疑似セレクターは実際にはここでそれをカットしようとしているようには見えません。

15
Gabriel Hurley

仕様に関して言えば（ http://www.w3.org/TR/CSS2/zindex.html ）、a.someSelectorは位置付けられているので、子が壊れない新しいスタッキングコンテキストを作成します。のうち。 a.someSelectorを配置しないで、子のa.someSelector:afterをa.someSelectorと同じコンテキストに配置することができます。

11
cweider

私はこの質問が古く、受け入れられた答えを持っていることを知っています、しかし私は問題へのより良い解決策を見つけました。ここに投稿しているので、重複する質問を作成しないでください。解決策は他の人にも利用可能です。

要素の順番を入れ替えます。その下にあるコンテンツに:before疑似要素を使用し、それを補うために余白を調整します。マージンのクリーンアップは面倒ですが、必要なz-indexは保持されます。

私はIE8とFF3.6でこれをテストしました。

9
D.N.

z-indexまたは:before疑似エレメントの:afterを-1に設定し、z-indexプロパティー（position、absolute、またはrelative）を尊重するfixedを指定します。擬似要素のz-indexは、他の要素のデフォルトである<html>ではなく、その親要素に対して相対的であるため、これはうまくいきます。これは<html>の子要素であるため、これは理にかなっています。

私が抱えていた問題（この質問と上記の一般的な答えにつながった）は、:after疑似要素を使用して、背景が15であるz-indexを持つ要素、そしてz-indexが設定されている場合でもそれを使用することでした。 14の、それはまだその親の上にレンダリングされていました。これは、そのスタッキングコンテキストでは、その親のz-indexが0であるためです。

うまくいけば、それは起こっていることを少し明確にするのに役立ちます。

4
Noah Erickson

私はそれをとても簡単に直しました：

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: -1;
}

これはz-index：1に親をスタックすることで、z-index：0に他のdom要素が '存在'しているため、子ルームのz-index：0に '終わる'ことができます。親が1のZインデックスの場合、子は他のDOM要素の下に配置されるため、表示されません。

これは、：afterのような擬似要素にも機能します。

0
Wachem

誰かがこれと同じ問題があるかどうかはわかりません。選択された答えは部分的に正しいです。

あなたが持っている必要があるものです：

parent{
  z-index: 1;
}
child{
 position:relative;
 backgr
0
Rodrigo García