CSS 的絕對定位範圍

懶人包系列。

不包含 border

子層的定位範圍只到「父層的 border 以內」，看下面兩個例子。

父層設 padding：

<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  /* 只加 padding */
  padding: 10px;
  background-color: chartreuse;
  margin-top: 100px;
  margin: auto;
  position: relative;
}
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: violet;
}

Output：

現在加上 border：

.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  /* 加上 border */
  border: 10px solid red;
  background-color: chartreuse;
  margin-top: 100px;
  margin: auto;
  position: relative;
}
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: violet;
}