为什么我的 absolutely/fixed-positioned 元素没有位于我期望的位置？

Question

我只是在学习 CSS 中的定位。根据我发现有用的文章，我开始玩了。

使用以下代码，我无法理解为什么绝对灰框 div 在其相对父项之外。我预计灰色框将位于容器的左上角。

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

也无法理解在下面的情况下为什么灰色框不在左上角，而是移动到橙色框留下的空白 space 之后。我刚刚将灰盒移动到容器内的第二个位置 div.

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange"></div>
  <div class="box-grey"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

我发现的所有详细文档（例如 MDN）和教程只是用 2-3 个框演示了非常简单的示例。

Answer 1

您必须始终在绝对定位的元素上设置 top:0; left:0;（或您想要的顶部、右侧、底部、左侧的任何值）。

Answer 2

首先，元素相对于其第一个定位（非静态）祖先元素定位。

在这种情况下，绝对位置适用于兄弟姐妹，而不适用于祖先。

关于祖先和兄弟姐妹，有一个关于它的神文档：Ancestors and siblings

.container {
  background: lightblue;
  position: relative;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
  <div class="box-green"></div>
</div>

如果我将元素放在 div 容器之后，一切都没有问题

Documentation of postion

关于第二部分，那个方框出现在那里是因为方框绿色与方框绿色的顶部和右侧无关，明白吗？我举个例子：

.container {
  background: lightblue;
  position: relative;
}

.box-orange2 {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  z-index: 2;
}

.box-orange {
  background: orange;
  height: 100px;
  width: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  z-index: 2;
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px;
  /*position: static;*/
}

.box-green {
  background: lightgreen;
  height: 100px;
  width: 100px;
  position: relative;
  top: -105px;
  left: 105px;
  z-index: 2;
}

.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-yellow {
  background: yellow;
  height: 100px;
  width: 100px;
  position: absolute;
}

<div class="container">
  <div class="box-orange2"></div>
  <div class="box-grey"></div>
  <div class="box-orange"></div>
  <div class="box-yellow"></div>
</div>

您可以看到，即使顶部和右侧是否在同级中，灰色和黄色框也不会改变行为。

Answer 3

要正确理解这一点，您需要参考 official specification，您可以在其中找到元素必须满足的方程式：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

我们没有任何边框和填充，因此在您的情况下，它只是：

'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block

如果你阅读下面的内容，你会发现：

'top' and 'bottom' are 'auto' and 'height' is not 'auto', then set 'top' to the static position, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'.

因此，在您的情况下，您设置了高度并将 top/bottom 保持为自动，因此顶部将设置为 静态位置

..More precisely, the static position for 'top' is the distance from the top edge of the containing block to the top margin edge of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static'..

为了简单起见，如果你没有设置，它就是元素的位置position:absolute。

这里有一个简单的插图可以更好地理解

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
}

.box-green {
  height:20px;
  background:green;
}

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey">I am absolute</div>
</div>

注意如果我们添加 position:absolute 保留的第一个元素的静态位置。我们没有指定任何最高值，因此浏览器将使用默认值，即元素的 position:static（默认位置）之一。

如果你不想这样，只需设置最高值，你就属于这个规则：

'bottom' is 'auto', 'top' and 'height' are not 'auto', then set 'auto' values for 'margin-top' and 'margin-bottom' to 0 and solve for 'bottom'

.container {
  background: lightblue;
  position: relative;
  padding:40px 20px;
  display:inline-block;
  vertical-align:top;
  width: 250px;
}


.box-grey {
  background: grey;
  height: 100px;
  width: 100px;
  position: absolute;
  top:0;
}

.box-green {
  height:20px;
  background:green;
}

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey" style="position:static;">I am static</div>
</div>

<div class="container">
  <div class="box-green"></div>
  <div class="box-grey"></div>
</div>

同样的逻辑适用于 the left property

您可能还会注意到 包含块 这个词的使用，这在这里非常重要，并在 same specification

中进行了解释

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

...

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:

...

这还不够，因为还有其他属性（下面列出）也建立了一个包含块，因此您可以相对于未定位的祖先定位元素！

为什么我的 absolutely/fixed-positioned 元素没有位于我期望的位置？

Why aren't my absolutely/fixed-positioned elements located where I expect?

html

css

css-position