关于定位和溢出处理的一些小经历

废话不说，上代码： 

<div class="scroll">
  <ul>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span class="current">&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img03.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img02.jpg" width="70" height="70" /><span>&nbsp;</span></li>
    <li><img src="images/img/img01.jpg" width="70" height="70" /><span>&nbsp;</span></li>
  </ul>
</div>
 
<style type="text/css">
*{margin:0; padding:0;}
ul,ol{list-style:none;}
.scroll{ width:880px; height:70px; margin:0 10px; display:inline; overflow:hidden; float:left; position:relative;}
.scroll ul{ height:70px; overflow:hidden;}
.scroll li{ width:70px; height:70px; margin-right:11px; overflow:hidden; float:left; display:inline; position:relative; cursor:pointer;}
.scroll li img{ display:block; width:70px; height:70px; border:none;}
.scroll li span{ display:block; width:70px; height:70px; position:absolute; top:0; left:0; background:#000; opacity:0.5; -moz-opacity:0.5; -webkit-opacity:0.5; filter:alpha(opacity=50);}
.scroll li span.current{ opacity:0; -moz-opacity:0; -webkit-opacity:0; filter:alpha(opacity=0);}
</style>

以上代码是正常的。但，当你把样式中的 .scroll 里的 position:relative; 去掉后，你会发现，在IE6和IE7下， overflow:hidden;  无效了。

以上代码再滚动图片窗里常用到。

 

总结：

当带有 overflow:hidden; 的元素的子元素中存在定位元素时（哪怕是相对定位），都会造成溢出无法隐藏。解决方法是为父元素也加上定位。

同理，有时父元素带了overflow:hidden; 样式，但其内部的定位子元素又需要显示到父元素外，则父元素不添加定位样式即可。