css中position:relative和overflow:hidden之间的难题

2021-03-09 18:08 jianzhan

今日在做网页页面的情况下发现1个难题，在父标识中应用了overflow:hidden;时，假如子标识中有元素的position设定成relative的情况下，在IE6和IE7中父元素的overflow对其将不起功效，在IE8、FF，Chrome中均一切正常显示信息以下编码：

拷贝编码

编码以下:

<div style="height:100px; width:100px; background:#CCC; overflow:hidden;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>

实际效果以下图：

处理计划方案：将父标识的position也设定成relative，编码以下：

拷贝编码

编码以下:

<div style="height:100px; width:100px; background:#CCC; overflow:hidden; position:relative;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>

实际效果如图所示：

实际效果如上图一切正常显示信息。