349

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

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

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

It seems like the ::after element can not be lower then the element itself.

Is there a way to have the pseudo element lower then the element itself?

4

9 に答える 9

441

疑似要素は、関連付けられた要素の子孫として扱われます。擬似要素をその親の下に配置するには、新しいスタック コンテキストを作成して、デフォルトのスタック順序を変更する必要があります。
疑似要素 (絶対) を配置し、「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>

于 2012-05-30T18:32:54.920 に答える
277

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

このような：

#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>

于 2012-01-30T23:44:28.723 に答える
15

ここでは2つの問題が発生しています。

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

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

ブラウザ間で機能すると私が考えることができる唯一のことは、CSSではなくjavascriptを使用して要素を挿入することです。これは優れたソリューションではないことはわかっていますが、:beforeおよび:after疑似セレクターは、ここでそれをカットするようには見えません。

于 2010-06-14T19:53:41.740 に答える
11

仕様（ http://www.w3.org/TR/CSS2/zindex.html）に関して言えば、a.someSelectorが配置されているため、子が抜け出せない新しいスタッキングコンテキストが作成されます。配置しないままa.someSelectorにすると、子a.someSelector:afterはと同じコンテキストに配置される可能性がありますa.someSelector。

于 2010-06-14T20:20:12.983 に答える
10

この質問は古くからあり、受け入れられている答えがあることは知っていますが、問題に対するより良い解決策を見つけました。重複した質問を作成しないようにここに投稿しています。解決策は他のユーザーが引き続き利用できます。

要素の順序を切り替えます。:before下にあるはずのコンテンツに疑似要素を使用し、余白を調整して補います。マージンのクリーンアップは面倒な場合がありますが、必要なz-indexものは保持されます。

これを IE8 と FF3.6 で正常にテストしました。

于 2011-02-28T20:09:00.427 に答える