Question

我正在研究CSS并且正如我所知，当一个绝对元素A在内部相对元素B中时，A将相对于B.我想在绝对元素中测试case绝对元素但是我没有看到任何差异

这是我的测试：

<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;
}

因此。我的问题是：当绝对元素在其他绝对元素中时，是否有任何差异？如果没有，为什么我读过的每个例子总是只提到其他相对元素中的case绝对元素？

谢谢：）

Answer 1

与absolute父级相关的absolute元素的定位“绝对”与relative父级相同。事实上，如果父母是fixed，它也是一样的。

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

虽然学习最常见的示例是absolute relative，但是当您制作一些基本的html时，您需要的第一个元素absolute将不会被定位（可能）如您所愿，直到您将relative设置为父级，并且根本不会更改此父级的位置（从static到relative，不会对任何元素产生任何影响）

你可能会发现你想要做的下一个问题是“为什么默认情况下所有元素都不会设置为position:relative，如果它根本不会改变html的流程，那么你可以节省时间而不添加position:relative这么多班级？“是的，我不理解它，直到有一天我需要一个absolute元素来定位与不是最亲近的父元素。（例如，与主菜单absolute相关的ul子菜单的位置，而不是与他的直接父级li相关的位置。希望它足够清楚

CSS：绝对元素中的绝对元素

1 个答案: