Question

所以，假设我们有以下代码：

body {
    margin: 0;
    /* position: relative; */
}

.container {
    width: 300px;
    height: 300px;
    margin: 100px;
    background: gray;
}

.absolute {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 10px;
}

<div class="container">
    <div class="absolute"></div>
</div>

在这种情况下，.absolute元素相对于正文定位，正如预期的那样。

不要让position: relative添加到正文中。该元素现在相对于.container定位。这没有意义，因为absolutely positioned element is positioned relative to nearest positioned ancestor (non-static)在这种情况下是正文。

身体定位是否与其他元素区别对待？

CODEPEN

Answer 1

来自关于absolute positioning的说明：

定位框的包含块由最近的定位祖先建立（如果不存在，则由initial containing block建立，如我们的示例所示）。

好的，你没有最近的祖先，移动到initial containing block：

元素框的位置和大小有时是相对于某个矩形计算的，称为元素的包含块。元素的包含块定义如下：


root element所在的包含块是一个名为 initial包含块的矩形。对于连续媒体，它具有viewport的尺寸并锚定在画布原点;它是分页媒体的page area。

很好，你的案例中root element是什么：

html元素represents HTML文档的根目录。

这意味着默认情况下，.absolute元素与<body>位于非相对，但位于<html>。

Answer 2

实际上，如果你没有指定position：relative，那么元素的位置为：static（https://www.w3schools.com/cssref/pr_class_position.asp）。如果要根据容器元素放置.absolute，实际上需要相对于.container元素插入位置。这就是你有这种奇怪行为的原因。

位置相对于身体的意外行为

2 个答案: