1、绝对定位元素溢出父元素如何隐藏
通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！
而绝对定位的元素若超出其父元素的边界，要想将溢出的部分隐藏，则，想隐藏在哪个祖先里，该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。
2、绝对定位常见误区：
绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于<html>元素（或者，body元素）进行定位。偏移值由其top、bottom、left、right值确定。
通常我们常听说：CSS绝对定位在没有其他有除static定位的包含块的情况下是以<html>元素进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置position：relative。
前面一句是没有问题的，在没有父元素设置定位的话，默认就是以<html>元素来定位的，但要想相对父元素定位，父元素除了设置相对定位（relative），设置absolute也是可以的。
正确的理解姿势是：
1.相对定位：相对于块级元素（或行内块）自身位置进行定位；
2.绝对定位：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；
注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。
举个例子：
//CSS部分
<style>
.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;
}
</style>
//html部分
<div class="father">
<div class="son"></div>
</div>
.father元素绝对定位是相对body的，这个没问题，主要看.son元素，他自身设置绝对定位，父元素.father也有绝对定位，但这个子元素是相对于有绝对定位的父元素来定位的，而不是body。
网友评论