CSS中的绝对定位（absolute）误区

这几天在慕课上看视频学习，偶然听到几个老师都说：CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置position：relative。注意，前面一句是没有问题的，在没有父元素设置定位的话，默认就是以body来定位的，但是后面一句，要想相对父元素定位，父元素必须设置相对定位（relative），根据我的开发经验和查阅相关资料确认后发现，这是不对的。

正确的理解姿势是：

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

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

注意css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位，举个栗子：

HTML:

1 <div class="father">
   <div class="son"></div>
 </div>

CSS:

 .father{
       width: 300px;
       height: 300px;
       background-color: orange;
       position: absolute;
       top:50%;
       left:50%;
       margin-top: -150px;
       margin-left: -150px;
     }
     .son{
       width: 100px;
       height: 100px;
       background-color: pink;
       position: absolute;
       left:;
       top:;
     }

.father元素绝对定位是相对body的，这个没问题，主要看.son元素，他自身设置绝对定位，父元素.father也有绝对定位，你觉得这个子元素会相对body定位还是父元素来定位呢？

结果为：子元素是相对于有绝对定位的父元素来定位的，而不是body；