即使將位置設置爲相對和不透明度設置爲0.99，z-index也不起作用

我有一張包含照片的動畫幻燈片，但無法通過調整z-index值使照片浮動在照片頂部。我嘗試了由Philip Watson所描述的工作，他建議改變不透明度值來改變堆疊環境，但我在實施時遇到問題。我目前的位置設置爲相對的，但z-index仍然無效。我的代碼可以在這裏看到：即使將位置設置爲相對和不透明度設置爲0.99，z-index也不起作用

http://pastebin.com/NBdV4wsn

和膠片跑這裏：

http://www.streetpics.co.uk/testingground.html

感謝這個真氣問題的任何幫助。

來源

2013-09-26 Darren Hardy

它不工作，因爲您正在使用電影條形圖像作爲背景圖像，並且名稱如下...您無法將內容放在背景圖像後面。我會推薦通過Pastebin的JSFiddle。 – Terry

您的z-index不起作用，因爲堆疊上下文僅針對兒童。無論您爲父母使用的z索引有多低，孩子都將處於自己的堆疊環境中，因此他們永遠不會落後於父母。

但是，可以總是創建在父容器一個psedo元件（例如，這是在同一堆疊內容作爲圖像），並將它疊加在圖像上：

.film_strip:after { 
    background-image: url([filmstrip.gif]); 
    background-repeat: repeat-x; 
    content: ""; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}

因此，你將不再需要爲任何東西指定z-index（yay！）。

訣竅迫使僞元素絕對定位的時候擴大到父，充分尺寸，是指定的頂部，左側，底部和右側的座標爲0

這裏是一個proof-概念小提琴：http://jsfiddle.net/teddyrised/pNPm2/

來源

2013-09-26 18:44:33 Terry

感謝特里花時間提供了一個很好的答案。它現在工作完美:) –

即使將位置設置爲相對和不透明度設置爲0.99，z-index也不起作用

回答

相關問題