Question

我的html页面中唯一具有position: relative;样式的元素是正文。

身体内部是：

<div id="nav" style="position:absolute;top:275px;left:50%;margin-left:-350px;">
    <div>foo</div>
    <div>bar</div>
</div>

#nav和#nav div css的样式为position: absolute;

所以#nav div出现在页面中间。

现在因为正文是相对的，并且是唯一的相对元素，left:0元素上的#nav div样式（“foo”和“bar”）应该将元素定位为0像素身体的左侧。但不幸的是，foo和bar位于#nav元素左侧的0像素位置。这是为什么？

我的印象是，位置相对的元素在定位术语中被视为“父”，因此foo和bar元素应位于正文左侧0像素处。

如果这不正确，有人会知道如何以这种方式定位元素吗？

如果我的假设是正确的，那么有人可以告诉我为什么在我的情况下这不起作用。

谢谢，Alex

Answer 1

当定位值为相对，绝对或固定时，绝对定位相对于最近定位的父元素起作用。

这意味着在您的情况下行为是正确的。由于绝对定位，div#nav是div#nav div的第一个定位父级。如果您希望这些div相对于身体边缘定位，则必须将它们从div#nav中取出。

Answer 2

这是正确的，因为当你精确定位（绝对或相对或固定）时，所有孩子都会引用这个元素。在你的情况下，由于导航是绝对定位的，导航中的每个div都相对于导航位置定位。

解决方法：