z-index不適用於相對定位的元素

Question

鑑於2個元素相對位於相對定位的父元素內部，我如何獲得元素尊重其z-索引？

HTML：

<div class="content"> 
    <img src="http://placekitten.com/100/100" alt="" class="preview"> 
    <img src="http://placekitten.com/200/200" alt="" class="full"> 
</div> 

CSS：

.content { 
    position:relative; 
    z-index:1; 
    outline:1px solid blue; 
} 
.preview { 
    z-index:1; 
    position:relative; 
    outline:1px solid yellow; 
} 
.full { 
    z-index:2; 
    position:relative; 
    outline:1px solid green; 
} 

的jsfiddle：http://jsfiddle.net/2Nz2g/1/

我試圖讓.full元素放置上層建築的.preview元素，所以，基本上.full元素位置完全不受.preview元素的影響。

我試過漂浮的元素無濟於事。 定位絕對不是一種選擇，因爲它完全拋棄了的位置。設置top:0;left:0也沒有效果。

Answer 1

我有一些情況下，如果一個元素被陸續呈現，一些瀏覽器可以忽略z-index，並吸引他們，因爲他們會正常工作。在這種情況下，你應該設置z-index爲負（< 0）值，迫使他們要在接下來的元素：

HTML：

在this fiddle，所有的Z-指標都是正看一看：

<div id="first"></div> 
<div id="second"></div> 

CSS：

#first { 
    width: 200px; 
    height: 100px; 
    background: red; 
    z-index: 10; 
} 

#second { 
    width: 200px; 
    height: 100px; 
    background: blue; 
    position: relative; 
    top: -30px; 
    left: 40px; 
    z-index: 1; 
} 

這裏第二個div被渲染在第一個之上，不管我指定了什麼z-index。

但是看看this one：

HTML：

<div id="first"></div> 
<div id="second"></div> 

CSS：

#first { 
    width: 200px; 
    height: 100px; 
    background: red; 
    z-index: 10; 
} 

#second { 
    width: 200px; 
    height: 100px; 
    background: blue; 
    position: relative; 
    top: -30px; 
    left: 40px; 
    z-index: -1; 
} 

正如你可以看到，我只設置第二個元素的z-index到-1現在它被正確渲染。

這是在Google Chrome 35上測試的。您可能需要在其他瀏覽器上檢查此錯誤。

Answer 2

可以讓你設置一個頂部/左/分辯位置移動DIV

的CSS：

.content { 
    position:relative; 
    z-index:1; 
    outline:1px solid blue; 
} 
.preview { 
    z-index:1; 
    position:relative; 
    outline:1px solid yellow; 
} 
.full { 
    top:20px; 
    right:20px; 
    z-index:2; 
    position:relative; 
    outline:1px solid green; 
} 

http://jsfiddle.net/2Nz2g/4/

Answer 3

這可以通過父DIV使用position: relative是固定的， position: absolute的圖像。這迫使圖像被對方

的jsfiddle的頂部對齊：http://jsfiddle.net/yL5Sf/