css绝对定位误区

之前一直认为 CSS 绝对定位在没有其他有除 static 定位的包含块的情况下是以 body 进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置 position：relative。

后来发现然并卵，并不是这样的。 比如：

html

<div class="root">
  <div class="cont">
    <div class="center"></div>
  </div>
</div>

css

.root {
  width: 600px;
  height: 600px;
  background: #aaaaaa;
  margin: 0 auto;
  position: relative;
}
.cont {
  width: 300px;
  height: 300px;
  position: absolute;
  background: bisque;
  top: 10px;
  left: 10px;
}
.center {
  position: absolute;
  width: 100px;
  height: 100px;
  background: chocolate;
  top: 10px;
  left: 10px;
}

这里面 cont 相对于 root 绝对定位是没有问题的，但是 center 也是绝对定位的，那么它该相对于谁呢？ 结果为：center 元素是相对于有绝对定位的 cont 元素来定位的，而不是 root；

所以正确的理解应该是：

相对定位：相对于块级元素自身位置进行定位；

绝对定位：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是 body）；