CSS中overflow:hidden失效什么原因，怎樣解決-群英

上一篇：CSS動(dòng)畫實(shí)現(xiàn)背景無縫無限循環(huán)的實(shí)現(xiàn)示例下一篇：用CSS實(shí)現(xiàn)數(shù)字卡片翻轉(zhuǎn)效果的方法是什么

這篇文章給大家分享的是“CSS中overflow:hidden失效什么原因，怎樣解決”，對(duì)大家學(xué)習(xí)和理解有一定的參考價(jià)值和幫助，有這方面學(xué)習(xí)需要的朋友，接下來就跟隨小編一起學(xué)習(xí)一下吧。

失效原因

今天在寫輪播圖的時(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ì)失效

現(xiàn)在大家對(duì)于CSS中overflow:hidden失效什么原因，怎樣解決的內(nèi)容應(yīng)該都有一定的認(rèn)識(shí)了吧，希望這篇能對(duì)大家有所幫助。最后，想要了解更多，歡迎關(guān)注群英網(wǎng)絡(luò)，群英網(wǎng)絡(luò)將為大家推送更多相關(guān)的文章。

標(biāo)簽： overflow:hidden

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇：CSS動(dòng)畫實(shí)現(xiàn)背景無縫無限循環(huán)的實(shí)現(xiàn)示例下一篇：用CSS實(shí)現(xiàn)數(shù)字卡片翻轉(zhuǎn)效果的方法是什么