z索引不适用于相对定位的元素

准刺

给定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也无效。

arielnmz

我曾经遇到过这样的情况：如果一个元素一个接一个地呈现，则某些浏览器可能会像平常一样忽略z-index并绘制它们。在这种情况下，您应该将设置z-index为负（<0）值，以将其置于下一个元素之下：

看一下这个小提琴，其中所有z索引都是正数：

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

div无论z-index我指定了什么，这里的第二个都将显示在第一个之上。

但是看看这个：

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上进行了测试。您可能需要在其他浏览器上检查此bug。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。