如何在不删除绝对/相对定位的情况下垂直堆叠绝对定位的元素？-css教程-PHP中文网

首页

web前端

css教程

如何在不删除绝对/相对定位的情况下垂直堆叠绝对定位的元素？

Susan Sarandon

Dec 25, 2024 am 07:54 AM

How to Stack Absolutely Positioned Elements Vertically Without Removing Absolute/Relative Positioning?

定位困境：使用绝对定位重叠元素

在网页设计中，使用绝对定位对于创建特定的元素布局非常有用。然而，它也可能带来挑战，特别是在尝试垂直堆叠元素时。

考虑以下 CSS 片段：

body {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

登录后复制

以及相应的 HTML：

<body>
  <div class="container">
    <div>

登录后复制

通过此设置，目的是让两个 .row 元素垂直堆叠，而不是彼此重叠目前正在做。如何在不删除绝对/相对定位属性的情况下实现这一目标？

了解 CSS 定位

要找到解决方案，了解不同类型的 CSS 定位非常重要:

static：元素在文档中正常流动布局。
相对：元素根据上、右、下、左偏移量移动，但保留在文档流中。
绝对：元素从文档流中删除，并相对于其最近的定位祖先（而不是它们的
已修复：元素从文档流中删除并相对于视口定位，随页面滚动。

问题具有重叠元素

在我们的示例中， .row 和 .col 元素是绝对定位的。这意味着它们被从正常的文档流中取出并堆叠在一起。为了解决这个问题，我们需要找到一种方法，将它们保留在文档流中，同时仍然保持特定布局目的的绝对定位。

解决方案：双重嵌套

一个非正统但有效的解决方案是创建第二个容器元素，将行绝对定位：

<body>
  <div class="container">
    <div class="inner-container">
      <div>

登录后复制

.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

登录后复制

与通过这种双重嵌套，.inner-container 现在充当 .row 元素最接近的 定位祖先。结果，行垂直堆叠，保留原始布局，同时解决重叠问题。

注意：此解决方案保持其他布局目的的绝对定位，同时实现所需的垂直堆叠元素。但是，不建议将其用于一般用途，并且在无法删除绝对/相对定位时应将其用作最后的手段。

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn