Question

假设2个元素相对位于相对定位的父元素内部，我如何让元素尊重它们的z-index？

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影响1}}元素。

我试过浮动元素无济于事。 定位绝对不是一个选项，因为它完全抛弃了位置。设置top:0;left:0也没有效果。

Answer 1

我遇到过一些情况，如果某个元素在另一个元素之后呈现，某些浏览器可能会忽略z-index并按正常方式绘制它们。在这种情况下，您应该将z-index设置为负值（＆lt; 0）以强制它们位于下一个元素下：

查看this fiddle，其中所有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都会在第一个<div id="first"></div> <div id="second"></div>之上呈现。

但请看一下this one：

<强> HTML ：

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

<强> CSS ：

z-index

正如您所看到的，我只将第二个元素-1设置为{{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/

z-index不适用于相对定位的元素

3 个答案: