css中position:relative和overflow:hidden之間的問題
發(fā)布時間：2013-09-04 15:48:25 作者：佚名 
我要評論
我要評論在父標(biāo)簽中使用了overflow:hidden;時，如果子標(biāo)簽中有元素的position設(shè)置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，其實將父標(biāo)簽的position也設(shè)置成relative便可解決此問題
今天在做網(wǎng)頁的時候發(fā)現(xiàn)一個問題，在父標(biāo)簽中使用了overflow:hidden;時，如果子標(biāo)簽中有元素的position設(shè)置成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>
效果如下圖：
解決方案：將父標(biāo)簽的position也設(shè)置成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>
效果如圖所示：
效果如上圖正常顯示。
復(fù)制代碼
代碼如下:<div style="height:100px; width:100px; background:#CCC; overflow:hidden;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>
效果如下圖：
解決方案：將父標(biāo)簽的position也設(shè)置成relative，代碼如下：
復(fù)制代碼
代碼如下:<div style="height:100px; width:100px; background:#CCC; overflow:hidden; position:relative;">
<div style="height:300px; width:90px; background:#999; position:relative;"></div>
</div>
效果如圖所示：
效果如上圖正常顯示。
相關(guān)文章
深入理解CSS overflow:hidden——溢出,坍塌,清除浮動
這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-03CSS--overflow:hidden在項目實例中使用心得分享
大家對CSS屬性中overflow:hidden并不陌生，至于它的應(yīng)用，在下文中列出我在項目中，運用到此屬性的例子，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-04- 當(dāng)塊元素想呈現(xiàn)該元素內(nèi)部內(nèi)容不換行或者超過該元素的部分隱藏起來2010-03-05
- 網(wǎng)頁制作Webjx文章簡介：文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 常用文字隱藏方法的缺陷：2009-04-02
這篇文章主要介紹了css中overflow:hidden失效問題的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來2020-02-10
