为什么我绝对定位的元素没有位于我期望的位置？

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>

在以下情况下，也无法理解为什么灰色框不在左上角，而是在橙色框留下的空白处之后移动。我刚刚将灰色框移到了容器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' + '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

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

1. ‘top’和’bottom’为’auto’并且’height’不是’auto’， 然后将’top’设置为静态位置 ，将’margin-
   top’和’margin-bottom’的’auto’值设置为0 ，并解决“底部”问题。
   

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

更精确地说，“顶部”的静态位置是从包含块的顶部边缘到假设框的顶部边缘的距离，该假设框如果元素的指定“位置”值具有一直是“静态”

为简单起见，如果未设置，则为元素的位置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"></div>

</div>

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

如果您不希望这样做，只需设置最高值，然后遵循以下规则：

1. ‘bottom’为’auto’，’top’和’height’不是’auto’，然后将’margin-top’和’margin-bottom’的’auto’值设置为0并求解’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;

   }

   I am static

同样的逻辑适用于left属性

您可能还会注意到 包含 单词_的块_的使用，这在这里非常重要并在同一规范中进行了说明。

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

…

1. 如果元素具有“位置：绝对”，则包含块由最接近的祖先以“绝对”，“相对”或“固定”的“位置”建立，方法如下：

…

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