0

我有一个问题z-index。我<img>的不会出现在后面<div>。

http://cssdesk.com/LGYZm <-- 这是代码示例。

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

4

2 回答 2

0

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

无论如何，你有这个：

#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 就像您在原始帖子中提到的那样，它基本上是堆叠顺序。但是，您对两者都有 auto ，浏览器可能无法识别（取决于您使用的浏览器）......因此，不要为您的两个子元素设置 auto ，而是按照您希望它们出现的实际顺序。因此，例如，如果您希望 #bg 在您的 #childbox2 下方，只需将 z-index: 1 放入您的#bg，并将 z-index: 2 作为您的 #childbox2，这意味着您的 #childbox2 将位于顶部#bg....

另外，尽量不要使用 %（百分比）作为宽度和高度，使用像素 - 根据我的经验，像素更好用 ;) 希望有帮助，如果有，请检查复选标记 ;) - 如果没有帮助，请解决您的问题问题多一点！

看看这个jsfiddle：

http://jsfiddle.net/6Mcqr/

在#childbox2 和#bg 中，您将两个位置都设为相对位置，将#bg 保留为相对位置，但将#childbox2 位置更改为绝对位置，top: 0; 右：0；

于 2013-08-14T15:05:24.633 回答
0

这里的问题不z-index在于你的 CSS 的其他部分。

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

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

注意：在这种情况下，因为文字在图片之后，所以文字在堆叠顺序中自然会更高。

于 2013-08-14T15:13:52.480 回答