如何在 CSS 中垂直堆叠重叠的绝对定位元素？

解决垂直堆叠的重叠绝对定位元素

在 CSS 中，position 属性可以设置为各种值，包括相对、绝对和固定。当一个元素被绝对定位时，它会从正常的文档流中删除，并相对于其最近的定位祖先或视口进行定位。此行为可能会导致元素堆叠在一起，这可能不是所需的效果。

了解元素定位

• 静态（默认）：元素在文档流中正常堆叠。
• 相对： 元素保留在文档流，但可以使用顶部、右侧、底部和左侧调整它们的位置。
• 绝对： 元素将从文档流中删除，并相对于其最近的定位祖先进行定位。

重叠绝对定位元素

在下面的示例中，具有类 .row 和 .row 的元素.col 是绝对定位的，导致它们重叠：

body {
  position: relative; /* Contains absolutely positioned elements */
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1, .col2 {
  position: absolute;
}

要解决此问题并使元素垂直堆叠，我们需要指定它们的高度并确保正确管理它们的垂直位置。

不删除位置属性的解决方案

虽然修改元素的 CSS 并不理想，但不删除位置属性的可能解决方案是指定元素的高度每个 .row 并调整第二个 .row 的 top 属性以考虑第一个 .row 的高度：

body {
  /* position: relative; remains unchanged */
}

.container {
  /* position: absolute; remains unchanged */
}

.row {
  position: relative;
  height: 2em; /* Specify height for vertical stacking */
}

.col1, .col2 {
  /* position: absolute; remains unchanged */
}

#row2 {
  top: 2em; /* Offset to account for the height of #row1 */
}

理解解决方案

• 我们保持绝对定位元素的数量。
• 我们为每个 .row 指定一个高度以允许垂直堆叠。
• 我们调整第二个 .row (#row2) 的 top 属性，将其偏移第一个 .row (#row1) 的高度。

注意事项

• 确保.row 元素的高度是准确的，并且包括任何填充或边距。
• 此解决方案可能不适合动态生成的未知内容高度。
• 通常不建议有多个嵌套的绝对定位元素，因为它可能会导致复杂的行为。

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