這篇文章主要介紹了如何解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級(jí)問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專(zhuān)注骨干網(wǎng)絡(luò)服務(wù)器租用十多年，服務(wù)更有保障！服務(wù)器租用，遂寧聯(lián)通機(jī)房 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問(wèn)。靈活、實(shí)現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專(zhuān)屬高性能服務(wù)器。

1.問(wèn)題的出現(xiàn)

寫(xiě)了一個(gè)平鋪的列表，其中有些列表項(xiàng)具有hover出現(xiàn)的彈出框。希望達(dá)成的目標(biāo)是彈出框展現(xiàn)時(shí)，要把列表項(xiàng)內(nèi)容遮蓋住，以保證彈出框內(nèi)容優(yōu)先展示。

元素的結(jié)構(gòu)大致如下：

<div class="list">
    <div class="unit">
        <div class="content">列表項(xiàng)1</div>
        <div class="hover">彈出框1</div>
    </div>
     <div class="unit">
        <div class="content">列表項(xiàng)2</div>
    </div>
     <div class="unit">
        <div class="content">列表項(xiàng)3</div>
        <div class="hover">彈出框3</div>
    </div>
</div>

部分樣式如下：

.unit{
    position: relative；
    z-index: 1;
}
.hover{
    position: absolute;
    z-index: 10;
}

列表項(xiàng)1的彈出框雖然可以遮蓋住自身的內(nèi)容，卻無(wú)法遮蓋住列表項(xiàng)2的內(nèi)容。

2.原理

看起來(lái)，彈出框的z-index值是大于列表項(xiàng)父元素的z-index值（包括兄弟元素的），所以應(yīng)該會(huì)把所有列表項(xiàng)的內(nèi)容都遮蓋住才對(duì)。

但是，實(shí)際上，這里我忽略了一個(gè)最基本的點(diǎn)。因?yàn)閺棾隹蚴橇斜眄?xiàng)的子元素，所以其z-index值的大小，僅僅跟彈出框的兄弟元素對(duì)比才有意義。而對(duì)于與父元素（列表項(xiàng)）內(nèi)容的層級(jí)，應(yīng)該看父元素的層級(jí)關(guān)系。

我們可以想象為，每一個(gè)列表項(xiàng)，是一個(gè)平行世界，一個(gè)平行世界內(nèi)部設(shè)置的z-index，只有跟這個(gè)世界內(nèi)部的其它內(nèi)容比較起來(lái)才有意義，你要跟別的平行世界去比較，那對(duì)不起，這玩意有次元壓制。如果另一個(gè)平行世界的層級(jí)比你這個(gè)世界高，你自己的z-index設(shè)置的再高，那也是內(nèi)部稱霸王，再高也不會(huì)超過(guò)另一個(gè)世界的地板高。

在上邊的示例中，雖然所有的列表項(xiàng)z-index都設(shè)置為了1，但是根據(jù)出現(xiàn)順序，由于第二個(gè)列表項(xiàng)的層級(jí)關(guān)系會(huì)比第一個(gè)高，因此，列表項(xiàng)1的所有內(nèi)容都會(huì)被列表項(xiàng)2遮蓋。

3.解決方案

目前能想到的解決方案就是將彈出框和列表項(xiàng)設(shè)為平級(jí)（變?yōu)樾值茉兀?，讓彈出框的z-index值大于列表項(xiàng)的z-index，另外js手動(dòng)設(shè)置每一個(gè)彈出框的定位。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級(jí)問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章標(biāo)題：如何解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級(jí)問(wèn)題-創(chuàng)新互聯(lián)
瀏覽路徑：http://jinyejixie.com/article22/dpehjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)