overflow:hidden理解

 

overflow:hidden并不隐藏所有溢出的子元素

通常理解：overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）

事实上：当拥有以下条件时候就不会内容不会隐藏：

1 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；

2 内部溢出的元素是通过position:absolute绝对定位；

 

例子：没有下面红色部分则内部的dd不会隐藏

 <dl style="position:relative;width: 460px;height:336px;border:solid 10px #009900;overflow: hidden;">
  <dt id="changePic" style="overflow: hidden;margin: 0px;padding: 0px">
 		<img id="index11" alt="云的浪漫" src="1.jpg" type="changeImg">
 		<img id="index12" alt="夕阳与你我" src="2.jpg" type="changeImg">
 		<img id="index13" alt="朝阳" src="3.jpg" type="changeImg">
  </dt> 
  <dd  id="tip2"  style="margin:0px;position: absolute;left: 18px;top: 753px;background-color:white;width:400px;height:50px; color: rgb(255, 255, 255); background: none repeat scroll 0% 0% rgba(164, 173, 183, 0.65);size: 30px;  padding-left: 20px; line-height: 45px;">
  </dd>
</dl>