css中overflow:hidden失效問題的解決方法
我要評(píng)論失效原因
今天在寫輪播圖的時(shí)候發(fā)現(xiàn)，overflow;hidden;竟然能失效，發(fā)現(xiàn)原因如下：父元素想要隱藏溢出的絕對(duì)定位的子元素，需要給父元素加一個(gè)定位;因?yàn)榻^對(duì)定位的子元素會(huì)從內(nèi)向外尋找有定位的父元素，找不到的話overflow:hidden;也會(huì)隨之失效。
一探究竟
重要的事再說一遍，正如上述所言，overflow:hidden;失效的原因是：父元素想要隱藏溢出的絕對(duì)定位的子元素，需要給父元素加一個(gè)定位;因?yàn)榻^對(duì)定位的子元素會(huì)從內(nèi)向外尋找有定位的父元素，找不到的話overflow:hidden;也會(huì)隨之失效。
下面我們來試試：
（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)子元素為絕對(duì)定位時(shí)，很明顯，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>
我們只要給父元素加上一個(gè)定位即可,absolue和relative都可以(不過注意如果定位是absolute的話父元素會(huì)影響y軸下方的元素),這樣絕對(duì)定位的子元素就能找到這個(gè)父元素，overflow:hidden;也不會(huì)失效
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解CSS overflow:hidden——溢出,坍塌,清除浮動(dòng)
這篇文章主要介紹了深入理解CSS overflow:hidden——溢出,坍塌,清除浮動(dòng)的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-03css中position:relative和overflow:hidden之間的問題
在父標(biāo)簽中使用了overflow:hidden;時(shí)，如果子標(biāo)簽中有元素的position設(shè)置成relative的時(shí)候，在IE6和IE7中父元素的overflow對(duì)其將不起作用，其實(shí)將父標(biāo)簽的position也設(shè)置成2013-09-04CSS--overflow:hidden在項(xiàng)目實(shí)例中使用心得分享
大家對(duì)CSS屬性中overflow:hidden并不陌生，至于它的應(yīng)用，在下文中列出我在項(xiàng)目中，運(yùn)用到此屬性的例子，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-04- 當(dāng)塊元素想呈現(xiàn)該元素內(nèi)部?jī)?nèi)容不換行或者超過該元素的部分隱藏起來2010-03-05
CSS教程:CSS讓網(wǎng)頁文字自動(dòng)隱藏
網(wǎng)頁制作Webjx文章簡(jiǎn)介：文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 文字隱藏應(yīng)用廣泛，但常用的方法沒有什么親和力。 常用文字隱藏方法的缺陷：2009-04-02
