Solve the hierarchy problem of child element z-index and parent element sibling nodes in CSS

1. The emergence of the problem

Wrote a flat list, some of which have pop-up boxes that appear on hover. The desired goal is to cover the list item content when the pop-up box is displayed to ensure that the pop-up box content is displayed first.

The structure of the element is roughly as follows:

<div class="list">
    <div class="unit">
        <div class="content">List Item 1</div>
        <div class="hover">Pop-up box 1</div>
    </div>
     <div class="unit">
        <div class="content">List Item 2</div>
    </div>
     <div class="unit">
        <div class="content">List Item 3</div>
        <div class="hover">Pop-up box 3</div>
    </div>
</div>

Some of the styles are as follows:

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

The actual effect is as follows:

Although the pop-up box of list item 1 can cover its own content, it cannot cover the content of list item 2.

2. Principle

It seems that the z-index value of the pop-up box is greater than the z-index value of the parent element of the list item (including sibling elements), so it should cover the contents of all list items.

But, in fact, I have overlooked a most basic point here. Because the pop-up box is a child element of the list item, the size of its z-index value is only meaningful when compared with the sibling elements of the pop-up box. As for the hierarchy with the content of the parent element (list item), you should look at the hierarchical relationship of the parent element.

We can imagine that each list item is a parallel world. The z-index set inside a parallel world is meaningful only when compared with other contents within this world. If you want to compare it with other parallel worlds, I'm sorry, this thing has dimensional suppression. If the level of another parallel world is higher than your world, no matter how high your own z-index is set, it is just an internal dominance, and it will never be higher than the floor of the other world.

In the example above, although the z-index of all list items is set to 1, according to the order of appearance, since the second list item is higher than the first, all the contents of list item 1 will be covered by list item 2.

3. Solution

The only solution that can be thought of at present is to set the pop-up box and the list item to the same level (become sibling elements), make the z-index value of the pop-up box greater than the z-index of the list item, and manually set the positioning of each pop-up box using js.

This is the end of this article about solving the hierarchy problem of child element z-index and parent element sibling nodes in CSS. For more relevant CSS z-index hierarchy content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!