5

これが私のjsfiddleです：http://jsfiddle.net/vSJnL/4/

私の#generateddiv にz-indexは 1 があり、疑似要素にz-indexは -1がありますが、予想どおり、生成されたコンテンツの上に表示される div ではなく、div テキストのみが表示されます。また、疑似要素に正の z-index を与え、div により大きい z-index を与えると、疑似要素の後ろに<div>残ります..

なぜこれが当てはまるのか、誰でも説明できますか？

4

2 に答える 2

5

あなたのコンテンツが（明確にするために）空ではないとしましょうcontent: "generated";：http://jsfiddle.net/vSJnL/5/

次に、次のようにレンダリングします。

<div id="over">
    <div id="generated">
    Hello World!
    <span>generated</span>
    </div>
</div>

http://jsfiddle.net/vSJnL/6/を参照してください

w3c の仕様を参照してください: http://www.w3.org/TR/CSS21/generate.html#before-after-content

したがって、生成された要素は、div#generated 自体の後ではなく、テキスト ノードの後の div#generated 内にあります。

これを念頭に置いて、スタッキング コンテキストz-index: -1は一目瞭然です。結果として、Textnode は疑似要素の上にあります。

于 2013-03-17T23:47:16.150 に答える
2

私はあなたのHTML要素を試しました：

<div id="over" class="case{0,1,2}">
    <div class="generated">Hello World!</div>
</div>

次のCSSを使用して3つのケースを調べました。デモンストレーションのために、生成されたコンテンツのスタイルを少し変更しました。

.generated {
    background-color: gray;
    border: 1px dotted black;
    color: white;
    width: 20rem;
    position: relative;
}
.generated::after {
    content:"\00A0";
    display: block;
    width: 0;
    height: 0;
    border-width: 20px;
    border-color: khaki blue khaki red;
    border-style: solid;
    position: absolute;
    left: 0;
    top: 0;
}

.case0 .generated {
}
.case0 .generated::after {
}

.case1 .generated {
}
.case1 .generated::after {
    z-index: -1;
}

.case2 .generated {
    z-index: 200
}
.case2 .generated::after {
    z-index: -1;
}

デフォルトでは、 を設定せずz-index、生成されたコンテンツをテキスト ノート コンテンツの上にスライドさせます。絶対配置を使用してコンテンツを重ねるだけです。

ケース 1 ではz-index: -1、生成されたコンテンツに適用し、要素の下に移動します。

ケース 2 では、生成されたコンテンツにz-index: 200(または 1 以上の任意の数を)適用.generatedしますz-index: -1。この場合、生成されたコンテンツはノード テキストと要素の間に表示されます。

ケース 1 では、生成されたコンテンツ 1 の z インデックスを z 軸に沿って単純にふるいにかけます。ノード テキストとそのコンテナーは同じ z 軸レベルにあるため、生成されたコンテンツはコンテナーとノード テキストの下に表示されます。

ケース 2 では、ノード テキストをそのコンテナーから上にシフトし、次に生成されたコンテンツをノード テキストの 1 つ下にシフトしているため、生成されたコンテンツはコンテナーの上にあり、ノード テキストの下にあります。

これは便利な CSS テクニックかもしれません。

フィドル参照: http://jsfiddle.net/audetwebdesign/9sR8B/

于 2013-03-18T01:00:55.623 に答える