css中overflow:hidden失效問題的解決方法
發(fā)布時間：2020-02-10 16:23:49 作者：tangrl 
我要評論
我要評論這篇文章主要介紹了css中overflow:hidden失效問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
失效原因
今天在寫輪播圖的時候發(fā)現(xiàn)，overflow;hidden;竟然能失效，發(fā)現(xiàn)原因如下：父元素想要隱藏溢出的絕對定位的子元素，需要給父元素加一個定位;因為絕對定位的子元素會從內(nèi)向外尋找有定位的父元素，找不到的話overflow:hidden;也會隨之失效。
一探究竟
重要的事再說一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隱藏溢出的絕對定位的子元素，需要給父元素加一個定位;因為絕對定位的子元素會從內(nèi)向外尋找有定位的父元素，找不到的話overflow:hidden;也會隨之失效。
下面我們來試試：
（1）
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
當(dāng)子元素為絕對定位時，很明顯，overflow:hidden;失效了
（2）
<style>
.wrapper{
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
position: relative;
}
.content{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
我們只要給父元素加上一個定位即可,absolue和relative都可以(不過注意如果定位是absolute的話父元素會影響y軸下方的元素),這樣絕對定位的子元素就能找到這個父元素，overflow:hidden;也不會失效
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解CSS overflow:hidden——溢出,坍塌,清除浮動
這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-03css中position:relative和overflow:hidden之間的問題
在父標(biāo)簽中使用了overflow:hidden;時，如果子標(biāo)簽中有元素的position設(shè)置成relative的時候，在IE6和IE7中父元素的overflow對其將不起作用，其實將父標(biāo)簽的position也設(shè)置成2013-09-04CSS--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
