CSS3動畫z-index圖片不起作用

Question

我想在CSS3動畫上設置圖片。所以我使用z-index:55作爲動畫圖像，z-index:56作爲頂部圖像。但我做不到。

這裏我想在電視裏面顯示一些動畫。所以對我來說重要的是要用動畫取代電視圖像。 （對於我的迴應的問題，我避免使用的圖像作爲背景）

請參閱我example fiddle here

Answer 1

多個問題有：

• 1特里評論 - 元件需要是syblings。
• 2作爲阿里safain說，你需要有現在的位置，在兩個元素

讓你的小提琴能像這樣被更新定義：

.tv { 
position: relative; 
z-index: 100; 
} 

https://jsfiddle.net/s9s1mbxv/1/

這樣將使旋轉到背景中，但仍會溢出圖像。 這可能與電視機的設置巨大的邊框和offseting它帶回頂部/左可partialy解決，但是這是一個有點傻

.tv { 
    position: relative; 
    z-index: 100; 
    border: 200px solid #fff; 
    top: -100px; 
    left: -100px; 
} 

更好的辦法是白色背景添加到電視圖像。

Answer 2

添加position到電視元素。

根據w3s：

注：z索引僅適用於定位元素（位置：絕對的， 位置：相對的，或位置是：固定）。

Answer 3

z-index只適用於帶有css position的元素。

Answer 4

加成@Thaillie答案：

z-index只會上的元素與爲CSS屬性position工作除了position值static。如果你將使用 位置：static; 不能使用z-index

You can check here about position static