6

z-indexを使用すると、絶対配置された疑似要素が失われるのはなぜtransitionですか?

フィドル: http://jsfiddle.net/RyanWalters/jNgLL/

何が起こっていますか？ をクリックするとli、値を変更せずに左にスライドしz-indexます。ただし、:afterコンテンツは の上にポップアップしていliます。

何が起こるべきですか？ 私はそれが後ろに隠れていることを望んでいましたli.

CSS (少し単純化されています。完全な例については fiddle を参照してください):

li {
    position: relative;
    transition: transform 0.2s;
}

li.active {
    transform: translateX(-100px);
}

li:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    content: "Yada yada";
}

:afterコンテンツが の後ろにとどまらないのはなぜliですか?

4

2 に答える 2

5

@BernzSedの答えは正しいです。ただし、解決策は次のとおりです。

a (またはその他の要素) を<li>使用してコンテンツを でラップすると、疑似要素の によって強制的に子要素の背後に配置されます。<div>position: relativez-index: -1

重要なコードは次のとおりです。

HTML:

<ul>
  <li><div>This is the first item</div></li>
</ul>

CSS:

li,
li div {
  position: relative;
}

li:after {
  position: absolute;
  z-index: -1;
}

例: http://jsfiddle.net/shshaw/jNgLL/3/

また、興味深いことに、疑似要素を使用する場合は、重ね順で既に子要素の下に:beforeあるため、 は必要ありません。z-index: -1position: relative

于 2013-11-14T21:43:40.817 に答える