我们需要对 z-indexed div 使用绝对定位吗？答案

【问题标题】：Do we need to use absolute positioning for z-indexed divs?我们需要对 z-indexed div 使用绝对定位吗？
【发布时间】：2011-03-09 10:00:37
【问题描述】：

我想将一个 div 放置在另一个 div 之上，但绝对是这样的：

<div id='parent'>

   <div id='under' z-index='1' width='100' height='100'></div>

   <div id='over' z-index='2' width='100' height='100'></div>

</div>

我知道我需要两个 div 的宽度和高度，但我不知道它们应该是什么绝对位置（如果我没看错，我们需要使用 z-index 为 div 指定绝对定位。因为它们'都在父 div 中，我可以将 x/y 位置都设置为 0,0，以便它们相对于父级绝对定位吗？嗯，可能不是 - 我可以在这里做什么？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

你只需要交换顺序，所以绝对的在前，像这样：

<div id='parent'>
   <div id='over' style='position: absolute; width: 100px; height: 100px'></div>
   <div id='under' style='width: 100px; height: 100px'></div>
</div>

You can try a demo here，注意结果是红色的（#over 样式）。

这是过度的，因为第一个与第二个在流中的相同位置开始，但由于它是绝对的，因此不占用流中的空间。这意味着under div 也从完全相同的位置开始。

【讨论】：

【解决方案2】：

嗯，关键词是'relative to their parent'，意思是父级应该有相对定位（position: relative;），以便包含绝对定位的子div，否则它们将相对于文档窗口。

之后，您将父级的位置设置为相对位置，将子 div 的位置设置为绝对位置，默认情况下，它们应在相对于父级位置的 (0,0) 处重叠。然后，您可以通过调整属性的值来指定更多内容：上、右、下、左。

【讨论】：

只有当你真正给元素一个top或left位置时，这才是正确的:)在这种情况下没有必要这样做，只需将绝对的放在它覆盖的之前，文件流和绝对高于正常流的处理其余部分。