我只是在學習CSS中的定位?；谖野l現有用的那篇文章，我開始嘗試。

對于下面的代碼，我不明白為什么絕對灰盒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>

為了正確理解這一點，您需要參考官方規范，在那里您可以找到該元素必須滿足的等式:

'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

如果你仔細閱讀，你會發現:

“頂部”和“底部”是“自動”且“高度”不是“自動”，然后將“頂部”設置為靜態位置，將“邊距-頂部”和“邊距-底部”的“自動”值設置為0，并求解“底部”。 因此，在您的情況下，您已經設置了一個高度，并保持頂部/底部為自動，因此頂部將被設置為靜態位置

..更準確地說,“頂部”的靜態位置是從包含塊的頂部邊緣到假設框的頂部空白邊緣的距離，如果其指定的“位置”值為“靜態”,則該假設框應該是元素的第一個框..

簡單來說，如果沒有設置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>

您必須始終設置top:0；左:0；在絕對定位的元素上(或者你想要的任何值，比如上、右、下、左)。

首先，元素是相對于它的第一個定位(非靜態)祖先元素定位的。

在這種情況下，絕對位置適用于同級，而不適用于上級。

關于祖先和兄弟姐妹，有一個很好的文檔:祖先和兄弟姐妹

.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>