CSS：绝对元素内的绝对元素

Question

我正在学习 CSS 并且在我学习时，当相对元素 B 中的绝对元素 A 时，A 将相对于 B。我想测试绝对元素中的绝对元素，但我没有看到任何差异。

这是我的测试：

<div id="box-1">
    <div id="box-2"></div>
</div>

绝对内相对

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: relative;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

绝对里面绝对

#box-1 {
    width: 200px;
    height: 200px;
    background: #000000;
    position: absolute;
}

#box-2 {
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px;
    background: #e2e2e2;
    position: absolute;
}

所以。我的问题是：当一个绝对元素在其他绝对元素内时，有什么区别吗？如果不是，为什么我读过的每个例子总是只提到其他相对元素中的绝对元素？

谢谢 ：）

Answer 1

absolute相对于absolute父元素定位元素与父元素“绝对”相同relative。事实上，如果父母是fixed.

基本上，您将始终将absolute元素与最近的父元素相关联，并带有NO position:static（默认情况下，这是所有元素的位置）。

虽然学习最常见的例子是absolute在里面，relative因为当你制作一些基本的 html 时，你需要的第一个元素absolute不会被定位（可能），直到你设置relative为父元素并且不会改变位置根本没有这个父级（从static到relative对任何元素都没有任何影响）。

可能您愿意做的下一个问题是“position:relative如果它根本不会改变 html 的流程，为什么不将所有元素都设置为默认值，然后节省时间而不添加position:relative这么多类？”。是的，直到有一天我需要一个absolute元素来定位到 NOT 最接近的父元素之前，我也无法理解它。（例如，absolute子菜单相对于主菜单的位置，ul但与其直接父菜单无关，即 a li）。希望它足够清楚