如何防止CSS中的绝对元素重叠？

绝对元素的垂直重叠：解决方案

在 HTML 代码中，您定义了两行，#row1 和 #row2，绝对定位。出现此问题的原因是绝对元素从正常文档流中删除并相互堆叠，导致内容重叠。

要解决此问题，我们需要了解绝对定位的目的和行为。通过将元素设置为position:absolute;，我们将其从标准流中删除，并将其相对于其最近定位的祖先进行定位。

在您的示例中，.row 和 .col1、.col2 是嵌套在其中的绝对元素.container，这也是绝对的。然而，由于这三个元素都是绝对的，因此它们都变得独立且重叠。

为了解决这个问题，我们需要建立一个适当的定位层次结构。我们可以通过将 .row 设置为相对定位来实现这一点。这样，.col1 和 .col2 将保持绝对值，但它们将相对于文档流中的 .row 定位。

此更改允许 #row1 和 #row2 垂直堆叠，尊重正常情况块元素行为。这是修改后的 CSS：

body { position:relative; min-height: 2em; width: 100%; }
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}

此修改保留了您所需的定位属性，同时确保 #row1 和 #row2 按预期显示在彼此下方。

以上是如何防止CSS中的绝对元素重叠？的详细内容。更多信息请关注PHP中文网其他相关文章！