Question

我希望用CSS定位我的文档，我想知道将body元素的position属性设置为相对于建立初始包含块的共识是什么。这被认为是不好的做法吗？我已经读到它是不必要的，并且，例如，如果body元素的第一个孩子是绝对定位的，它包含HTML元素的块默认值，这是等价的到视口。我感到很困惑，因为我无法在没有身体的情况下使定位工作{position：relative;}。

这是HTML和CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="div1">

        <p id="p1">
            content
        </p>

    </div>

    <div id="div2">

        <p id="p2">
            content
        </p>

    </div>

</body>
</html>

body{
    position: relative;
}

#div1 {
    position: absolute;
    top: 500px;
    width:auto;
    margin: auto;
}

#p1 {
    position: absolute;
    width: auto;
    background-color: aqua;
}

#div2 {
    position:absolute;
    top: 200px;
    background-color: red;
}

#p2 {
    position: absolute;
}

我把这个例子放在一起所以我可以开始搞乱position，margin和width的不同值。这与我最初发布的内容有很大不同。我希望了解如何为文档中的所有其他定位元素设置初始上下文，以便最终了解浏览器如何计算自动值。我开始对尝试在页面上自动设置宽度和中心元素感到困惑。

Answer 1

在 position:relative 元素上设置 body 可以相对于整个 body 元素（包括屏幕外部分）进行绝对定位，而不仅仅是页面最初可见的部分。请参阅 CSS 规范中 initial containing block 的定义。例如，position:absolute;bottom:0 通常会将元素定位在页面最初可见部分的底部，而 position:relative 位于 body 上，它将元素定位在页面的最底部页面（如果其最近的定位祖先是 body 元素）。

Answer 2

答案是肯定的，不是。

是的，不是因为它是body标记，而是因为在这种情况下它是positive=absolute标记的父级。 position=absolute始终引用其父级，需要将其设置为position=relative。

一般情况下，您不需要为body标记设置位置。如果您的#div包含<div class = "container">之类的父容器，则.container需要设置为position=absolute。

body {position：relative;}

2 个答案: