当前位置: 代码迷 >> Web前端 >> overflow:hidden了解
  详细解决方案

overflow:hidden了解

热度:596   发布时间:2013-08-01 15:23:18.0
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>

?

  相关解决方案