如何覆蓋通孔的z-index

Question

在這種情況下

參照一個DIV與另一個我不能簡單地通過使用z-index與id="covered"獲得的股利與id="cover"的div頂部。

有沒有其他解決方案？

代碼從http://codepen.io/anon/pen/jhgtf：

HTML：

<div id="cover"></div> 
<div id="covered"></div> 

CSS：

#cover{ 
    position:fixed; 
    width:800px; 
    background:black; 
    height:350px; 
    z-index:10; 
} 
#covered{ 
    width:80px; 
    background:yellow; 
    height:50px; 
    z-index:11; 
} 

Answer 1

你需要指定一個position上#covered：

#cover{ 
    position:fixed; 
    width:800px; 
    background:black; 
    height:350px; 
    z-index:10; 
} 
#covered{ 
    position: fixed; 
    width:80px; 
    background:yellow; 
    height:50px; 
    z-index:11; 
} 

CodePen example

元素與static（默認）定位不會受到的z-index - 與fixed，relative，或absolute只有定位元素定位是。你應該使用哪一個取決於上下文。

Official z-index specification

Answer 2

定義您covered DIV position。

Answer 3

#covered{ 
    position:relative; 
    width:80px; 
    background:yellow; 
    height:50px; 
    z-index:11; 
}