CSS Absolute in Absolute

在CSS中，可以使用position: absolute属性来定义元素的位置。当一个元素的定位为绝对定位时，它相对于最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则它相对于最初的包含块进行定位。在某些情况下，可能需要在已定位的祖先元素内部创建另一个绝对定位的元素。这就是 CSS 中的“Absolute in Absolute”（嵌套绝对定位）。

实现嵌套绝对定位

嵌套绝对定位需要考虑以下两个主要因素：

1. 子绝对定位元素的位置是相对于其父元素而不是文档视口的。
2. 子绝对定位元素的宽度和高度默认为其内容大小。如果没有给定这些属性，子元素将无法伸展到其父元素的大小。

要实现嵌套绝对定位，需要对子元素的位置进行定位，并对其大小进行调整。以下是一个简单的示例：

<div class="outer">
  <div class="inner">
    <div class="nested">
      This is nested text.
    </div>
  </div>
</div>

.outer {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}
.inner {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f0f;
}
.nested {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-color: #00f;
  color: #fff;
  text-align: center;
}

在此示例中，.outer元素是父元素，.inner元素是子元素，.nested元素是另一个嵌套的子元素。.outer元素设置了position: relative，使得.inner元素的定位相对于outer元素。.inner元素按预期的方式进行定位和调整大小，以填充.outer元素的中心。

.nested元素是嵌套在.inner元素中的另一个绝对定位元素。为了让.nested元素相对于.inner元素进行定位，它的父元素position属性必须设置为relative（在这种情况下，.inner元素）。.nested元素通过设置top和left属性为50％，将其相对于其包含元素的中心进行定位。然后，使用translate函数将其移动到正确位置。最后，使用width和height属性将其大小调整为.inner的80％。

总结

CSS中的“Absolute in Absolute”（嵌套绝对定位）可能需要在特定情况下实现。为了使嵌套的子元素按照预期的方式进行定位和调整大小，必须将父元素的position属性设置为relative。在子元素内部，可以使用top和left属性来设置子元素的位置，并使用width和height属性来调整其大小。使用嵌套绝对定位时，请务必注意子元素是相对于其父元素而不是视口进行定位。