CSS：絕對定位的僞元素失去z-index？

爲什麼絕對定位的僞元素在使用transition時會丟失其z-index？CSS：絕對定位的僞元素失去z-index？

小提琴： http://jsfiddle.net/RyanWalters/jNgLL/

發生了什麼事？ 當您單擊li時，它會向左滑動，而不會更改任何z-index值。但是，:after內容在li之上彈出。

會發生什麼？ 我希望它會隱藏在li後面。

的CSS（簡單一點點，看到完整的例子小提琴）：

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"; 
}

爲什麼不留在li背後的:after內容？

來源

2013-11-14 Ryan

可能是一個錯誤。 – bjb568

我在Chrome中看不到這個 – DaniP

[適用於Firefox（和非webkit瀏覽器）的jsfiddle]（http://jsfiddle.net/jNgLL/1/） – Oriol

我發現這對w3.org，我想解釋它：http://www.w3.org/TR/css3-transforms/#effects

任何值比在創建兩個堆疊環境和含塊的變換結果「無」等。該對象充當固定位置後代的包含塊。

據我瞭解，你li:after僞元素是li.active元素的堆疊上下文中，因此也不會出現後面。

來源

2013-11-14 21:30:53 BernzSed

我有一個更簡單的情況：一個具有絕對內容動態的靜態容器。我解決了注意將轉換僅應用於內容而不是內容+容器的問題。感謝您的明確解釋！ – McGiogen

@ BernzSed的回答是正確的。這裏有一個解決方案，但：

裹使用<div>（或任何其他元素）的<li>裏面的內容與position: relative，那麼z-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 psuedo元素，則不需要z-index: -1，因爲它已經在堆疊順序中的position: relative子元素下。

來源

2013-11-14 21:43:40 shshaw

我希望我能接受2個答案。 BernzSed在技術上是正確的，但您的解決方案正是我所期待的。謝謝！ – Ryan

不用擔心。 BernzSed回答了這個問題，我只是因解決問題而感興趣;） – shshaw

CSS：絕對定位的僞元素失去z-index？

回答

相關問題