绝对定位的元素当overflow在绝对定位元素及其包含块之间的时候不会被裁剪

绝对定位的元素不会受到overflow的限制

overflow与绝对定位：

1、overflow：hidden失效

一个容器，里面有张图片，

.box{

   width:300px; height:200px;

   border:5px solid #beceeb;

   overflow:hidden;

}

当图片大小超过容器大小时，超出部分会被隐藏，

但是当给图片加上样式：

img{

   position：absolute；

}

此时图片隐藏失败

2、overflow滚动失效

一个容器，里面有张图片，

.box{

   width:300px; height:200px;

   border:5px solid #beceeb;

   overflow:auto;

}

当图片大小超过容器大小时，容器会加上滚动条，

但是当给图片加上样式：

img{

   position：absolute；

}

拖动滚动条时图片不再跟着滚动，超出部分直接显示了出来

3、上诉情况失效的原因：

绝对定位元素不总是被父级overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候

包含块是指“含有position:relative/absolute/fixed声明的父级元素，没有则body元素”

上面的例子的层次结构：

body(包含块)

      .box(overflow)    overflow出现在绝对定位元素和包含块之间

            img(absolute)

4、避免overflow的失效：

1）overflow元素自身为包含块

<div class="box">

   <div style="position:relative">   //包含块

      <img src="1.jpg">

   </div>

</div>

2）overflow元素的子元素为包含块

3）任意合法transform声明当做包含块，

overflow元素自身transform：适用于IE9+/FireFox

overflow子元素transform：适用于IE9+/FireFox/Chrome/Safari/Opera

overflow妙用

加一个子元素，设置他为包含快

overflow元素自身为包含块

如果避免失效

img（absolute）元素回去父级找包含快（relative,absolute..）的元素，没有找到，则一直找到body,

div.overflow-hidden处于包含快(body)和绝对定位元素(img(absolute))之间，

所以over:hidden失效

失效原因~

overflow滚动失效

图片内容设置absolute，父容器的overflow:hidden失效

transform声明当包含块

如何避免失效

overflow失效的原理

绝对定位使overflow:hidden失效的原因：

overflow：hidden元素在绝对定位元素与之包含块（父级position为relative，absolute，fixed等）之间

overflow失效

overflow 与 absolute 绝对定位

overflow失效在实际场景中的 妙用：也就是内容可滑动时 部分内容可固定在某处不动

overflow失效问题处理：第三中方法 transform声明

overflow失效问题解析