z-index woes - z-index 不适用于相对和绝对 div 的组合答案

【问题标题】：z-index woes - z-index not working with combination of relative and absolute divsz-index woes - z-index 不适用于相对和绝对 div 的组合
【发布时间】：2013-01-14 21:46:07
【问题描述】：

我的 z 索引有些问题。

简而言之，我在一个称为容器的相对 div 下方有一个绝对 div。在容器中，我有三个 div，左中右，都是绝对定位的。

我希望底部的绝对 div（一条白线）出现在中心 div 的顶部但在左右 div 之后（所有这些都在容器 div 中）

现在 Z-index 做了两件事之一，它要么将白线放在所有三个主要 div 的下方，要么放在它们全部的前面。没有回旋的余地。

http://dev1.peeknpoke.co.uk 获取网站和参考资料

感谢您的帮助，

仍在修复我的知识漏洞！

【问题讨论】：

标签： html css z-index

【解决方案1】：

1) 移除#whiteline 元素

2) 像这样更改#blackbar 元素的css 属性：

background:black url("/img/line.png") repeat-x scroll 0 40px;

3) 您应该编辑 logobackground.png 图像，将其切成两半，以免出现在行前。

【讨论】：

是的，我实际上得到了图片的剪辑版，因为我知道这会修复它，但它并不是真正的问题，我主要想知道为什么它不是工作，因为它对未来的设计很有用。我真的没想过在背景上使用图片！简化代码总是很方便。
代码中的问题是，即使元素位于不同的容器中，您也尝试使用 z-index。该 z-index 应用于不同的上下文。因此，您可以将 z-index 应用于同一容器中同一级别的元素，以便将它们一个放在另一个后面
所以基本上我想要做的，在当前的布局中是不可能的？ :) 太好了，谢谢。

【解决方案2】：

那是因为你所有的代码都是错误的。如果您在.wrapper 上设置比.whiteline 更高的z-index，z-index 将起作用。但是由于 html 是错误的，它会破坏您网站的另一部分。

详细了解 z-index https://developer.mozilla.org/en-US/docs/CSS/z-index

【讨论】：

您好，感谢您提供的链接，不过我查看了大多数 z-index 资源并大致了解它。我希望你们中的一个人能指出具体问题，并愿意向我解释。