绝对定位常见误区：position:absolute相对于谁定位、及当溢出时怎么隐藏

一、绝对定位元素溢出父元素，怎么隐藏问题？

　　一般，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样便可防止子元素撑开父元素，使子元素可以溢出隐藏！

　　可是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐藏，须要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏！

　　绝对定位元素相对的元素是它最近的一个祖先，该祖先知足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值肯定。

　　而绝对定位的元素若超出其父元素的边界，要想将溢出的部分隐藏，则，想隐藏在哪一个祖先里，该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。

二、绝对定位常见误区：

　　一般咱们常据说：CSS绝对定位在没有其余有除static定位的包含块的状况下是以body进行定位，若是要想相对当前元素的父元素来定位，父元素必定要设置position：relative。

　　注意，前面一句是没有问题的，在没有父元素设置定位的话，默认就是以body来定位的，可是后面一句，要想相对父元素定位，父元素必须设置相对定位（relative），根据个人开发经验和查阅相关资料确认后发现，这是不对的。

　　正确的理解姿式是：

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

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

　　注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，因此离他最近的盒子的定位能够是相对定位（relative）和绝对定位（absolute）的，可是在开发中，通常是父盒子设置相对定位的，可是不表明只能是相对定位。

　　举个例子：

<div class="father">
   <div class="son"></div>
</div> .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:0; top:0; }

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

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