CSS基础--absolute与overflow

overflow对absolute元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。即如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁。
因此下面HTML中的图片不会被剪裁：

<div style="overflow: hidden;">  
<img src="1.jpg" style="position: absolute;"> 
</div> 

overflow元素父级是定位元素也不会剪裁，例如：

<div style="position: relative;">  
<div style="overflow: hidden;">  
<img src="1.jpg" style="position: absolute;">  
</div> 
</div> 

但是，如果overflow属性所在的元素同时也是定位元素，里面的绝对定位元素会被剪裁：

<div style="overflow: hidden; position: relative;">  <img src="1.jpg" style="position: absolute;"> 
<!-- 剪裁 --> 
</div> 

如果overflow元素和绝对定位元素之间有定位元素，也会被剪裁：

<div style="overflow: hidden;">  
<div style="position: relative;"> 
 <img src="1.jpg" style="position: absolute;"> 
 <!-- 剪裁 --> 
  </div> 
  </div> 

如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大，也都不会出现滚动条。例如，下面的HTML和CSS代码：

<div class="box">  <img src="1.jpg"> </div> 

.box {  
width: 300px; 
height: 100px;  
background-color: #f0f3f9;  
overflow: auto; 
} 
.box > img {  
width: 256px; 
height: 192px;  
position: absolute; 
} 

图片高度256px比容器.box高度100px明显高出了一截，但是，没有滚动条出现。
那就是由于position:fixed固定定位元素的包含块是根元素，因此，除非是窗体滚动，否则上面讨论的所有overflow剪裁规则对固定定位都不适用。
以上特性作用一是解决实际问题。例如上一节最后“返回顶部”的案例，保证高度为0，同时里面的定位内容不会被剪裁，或者在局部滚动的容器中模拟近似position:fixed的效果。作用二是在遇到类似现象的时候知道问题所在，可以“对症下药”，快速解决问题。
随着CSS3新世界到来的冲击，规则在不经意间发生了一些变化，其中最明显的就是transform属性对overflow剪裁规则的影响。
overflow元素自身transform：
1）IE9及以上版本浏览器、Firefox和Safari（OS X、iOS）剪裁；
2）Chrome和Opera不剪裁。
overflow子元素transform：
1）IE9及以上版本浏览器、Firefox和Safari（OS X、iOS）剪裁；
2）Chrome和Opera剪裁。
可以看到overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的，这是唯一和有定位属性时的overflow剪裁不一样的地方。