如何解決CSS中子元素z-index與父元素兄弟節點的層級問題

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

1.問題的出現

寫了一個平鋪的列表，其中有些列表項具有hover出現的彈出框。希望達成的目標是彈出框展現時，要把列表項內容遮蓋住，以保證彈出框內容優先展示。

元素的結構大致如下：

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

部分樣式如下：

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

列表項1的彈出框雖然可以遮蓋住自身的內容，卻無法遮蓋住列表項2的內容。

2.原理

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

但是，實際上，這里我忽略了一個最基本的點。因為彈出框是列表項的子元素，所以其z-index值的大小，僅僅跟彈出框的兄弟元素對比才有意義。而對于與父元素（列表項）內容的層級，應該看父元素的層級關系。

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

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

3.解決方案

目前能想到的解決方案就是將彈出框和列表項設為平級（變為兄弟元素），讓彈出框的z-index值大于列表項的z-index，另外js手動設置每一個彈出框的定位。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何解決CSS中子元素z-index與父元素兄弟節點的層級問題”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!