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

寫了一個平鋪的列表，其中有些列表項(xiàng)具有hover出現(xiàn)的彈出框。希望達(dá)成的目標(biāo)是彈出框展現(xiàn)時，要把列表項(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;
}

實(shí)際效果如下：

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

2.原理

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

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

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

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

3.解決方案

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

到此這篇關(guān)于解決CSS中子元素z-index與父元素兄弟節(jié)點(diǎn)的層級問題的文章就介紹到這了,更多相關(guān)css z-index層級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論