Question

我对z-index有疑问。我的<img>不会显示在<div>后面。

<img>和<div>都是另一个<div>的孩子，但是child-div应该出现在<img>的前面。在这种情况下，background-image不是一种选择。

Answer 1

不完全确定你在问什么，我看了你提供的链接，你想要完成你在顶部所拥有的东西，你有什么是底部的东西？

无论如何，你有这个：

#bg {
    max-width: 100%;
    position: relative;
    z-index: auto;
}

#childbox2 {
    width: 34%;
    min-height: 500px;
    float: right;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: auto;
}

试试这个：

#bg {
    max-width: 100%;
    position: relative;
    z-index: 1;
}

#childbox2 {
    width: 34%;
    min-height: 500px;
    float: right;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

你的z-index就像你在原帖中提到的那样，它基本上就是堆叠顺序。但是，两者都有自动，浏览器可能无法识别（取决于您使用的浏览器）...因此，不要为子元素设置自动，而是将您希望它们显示的实际顺序显示为。例如，如果您希望#bg位于＃childbox2下面，只需将#bg的z-index：1和z-index：2作为＃childbox2，这意味着您的＃childbox2将位于顶部#bg ....

此外，尽量不要使用％（百分比）的宽度和高度，使用像素 - 从我的经验像素更好地使用;）希望有帮助，如果是这样检查复选标记;） - 如果这没有帮助，请再解决一下你的问题！

看看这个jsfiddle：

http://jsfiddle.net/6Mcqr/

在＃childbox2和#bg中你将两个位置都作为相对位置，将#bg保留为相对位置，但将＃childbox2位置更改为绝对值，顶部为：0;和右：0;

Answer 2

这里的问题不在于z-index与你的css的其他部分有关。

z-index不会从文档流中取出元素。它只影响堆叠顺序。

您需要修改定位/布局逻辑，以便两个元素以您想要的方式水平/垂直对齐。

注意：在这种情况下，由于文本位于图片之后，文本在堆叠顺序中自然会更高。

z-index - img和div作为孩子

2 个答案: