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

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

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

考虑以下 CSS 片段：

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

.container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

以及相应的 HTML：

  <div class="container">
    <div>
<p>通过此设置，目的是让两个 <strong>.row</strong> 元素垂直堆叠，而不是彼此重叠目前正在做。如何在不删除绝对/相对定位属性的情况下实现这一目标？</p>
<p><strong>了解 CSS 定位</strong></p>
<p>要找到解决方案，了解不同类型的 CSS 定位非常重要:</p>
<ul>
<li>
<strong>static</strong>：元素在文档中正常流动布局。</li>
<li>
<strong>相对</strong>：元素根据上、右、下、左偏移量移动，但保留在文档流中。</li>
<li>
<strong>绝对</strong> ：元素从文档流中删除，并相对于其最近的<strong>定位祖先</strong>（而不是它们的</li>
<li>
<strong>已修复</strong>：元素从文档流中删除并相对于视口定位，随页面滚动。</li>
</ul>
<p><strong>问题具有重叠元素</strong></p>
<p>在我们的示例中， <strong>.row</strong> 和 <strong>.col</strong> 元素是绝对定位的。这意味着它们被从正常的文档流中取出并堆叠在一起。为了解决这个问题，我们需要找到一种方法，将它们保留在文档流中，同时仍然保持特定布局目的的绝对定位。</p>
<p><strong>解决方案：双重嵌套</strong></p>
<p>一个非正统但有效的解决方案是创建第二个容器元素，将行绝对定位：</p>
<pre class="brush:php;toolbar:false">
  <div class="container">
    <div class="inner-container">
      <div>
<pre class="brush:php;toolbar:false">.container {
  position: relative;
  min-height: 2em;
  width: 100%;
}

.inner-container {
  position: absolute;
}

.row {
  position: relative;
}

.col1,
.col2 {
  position: absolute;
}

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

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