CSS——css 绝对定位与相对定位使用，为什么是子绝父相

为什么是子绝父相？

相对定位
相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移（未脱离文档流）

绝对定位
在布置文档流中其他元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。（脱离了文档流）

使用

<div class="box">
  <div class="content">1</div>
  <div class="content">2</div>
</div>

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #000;
}
.content {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #fff;
}