body {position: relative;}
我希望使用CSS来定位我的文档，我想知道将body元素的position属性设置为relative以建立初始包含块的共识是什么。这被认为是不好的做法吗？我读到这并不是必需的，比如说，如果body元素的第一个子元素是绝对定位的，那么它包含的块默认为HTML元素，这相当于viewport。我很困惑，因为我似乎无法在没有body {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的不同值了。这与我最初发布的内容有很大不同。我希望了解如何为文档中所有其他定位元素设置初始上下文，以便最终了解浏览器如何计算自动值。我开始对试图在页面上自动设置宽度和居中元素感到困惑。
回答 3
Stack Overflow用户
发布于 2017-03-14 14:06:36
答案是肯定的，也是否定的。
是的，不是因为它是body标签，而是因为在本例中它是position:absolute标签的父标签。position:absolute总是引用其父对象，需要将父对象设置为position:relative。
不，通常你不需要为body标签设置位置。如果您的#div有一个像<div class = "container">这样的父容器，则需要将.container设置为position:absolute。
Stack Overflow用户
发布于 2021-01-27 05:56:21
在body元素上设置position:relative可以相对于整个body元素(包括屏幕外的部分)进行绝对定位，而不仅仅是页面的初始可见部分。请参阅CSS规范中initial containing block的定义。例如，position:absolute;bottom:0通常会将元素定位在页面初始可见部分的底部，而对于body上的position:relative，它会将元素定位在页面的最底部(如果其最近的定位祖先是body元素)。
Stack Overflow用户
发布于 2021-11-23 14:37:10
您输入的所有元素的父元素是body，因此body被认为是相对于位置的。因为，你可以在body中移动任何元素，这意味着body有位置，默认情况下，它的位置是相对的，而不需要键入它。所以我不知道你需要什么。但我试着解释了。
https://stackoverflow.com/questions/42776206
复制相似问题
腾讯云开发者
