overflow 属性规定当内容溢出元素框时发生的事情。
以下是overflow可能的值及其作用的简单描述
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
今天我们主要来探究一下overflow：hidden；与position搭配使用出现的特例。
大家都知道正常情况下overflow：hidden；都会超出部分隐藏。
eg：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.grandfather{
width: 400px;
height:400px;
background-color:pink;
position:relative;
}
.dad{
width:300px;
height:300px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="dad">
<div class="child"></div>
</div>
</div>
</boy>
</html>
浏览器运行结果
我们看到给祖先元祖grandfather相对定位，父级元素father 设置overflow：hidden时，子元素child超出部分隐藏了；属于正常情况。
但当child加上绝对定位后又会出现什么情况呢？
代码：
.child{
width: 600px;
height: 100px;
background-color: red;
position:absolute;
}
浏览器运行结果：
在这个运行结果中我们看到child盒子超出其父元素的部分并没有隐藏起来，而是它正常的宽高。
结论：当组先级元素相对定位，父元素overflow：hidden；时，子元素超出部分不隐藏