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

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!

<<:  New interactive experience of online advertising in website production (graphic tutorial)

>>:  DOM operation table example (DOM creates table)

Recommend

jQuery+swiper component realizes the timeline sliding year tab switching effect

Result: Implementation code: Need to be used with...

Introduction to install method in Vue

Table of contents 1. Globally registered componen...

A detailed introduction to the basics of Linux scripting

Table of contents 1. Script vim environment 2. Ho...

CSS beginner tutorial: background image fills the entire screen

If you want the entire interface to have a backgr...

Tutorial on installing MySQL 5.7.18 using RPM package

system: CentOS 7 RPM packages: mysql-community-cl...

Perfect solution for vertical centering of form elements

Copy code The code is as follows: <!DOCTYPE ht...

CSS implements a pop-up window effect with a mask layer that can be closed

Pop-up windows are often used in actual developme...

Example of using rem to replace px in vue project

Table of contents tool Install the plugin Add a ....

Web lesson plans, lesson plans for beginners

Teaching Topics Web page Applicable grade Second ...

Vue3.0 implements the magnifying glass effect case study

The effect to be achieved is: fixed zoom in twice...

Let's talk about parameters in MySQL

Preface: In some previous articles, we often see ...

Solution to Ubuntu not being able to connect to the Internet

Problem description: I used a desktop computer an...

MySQL trigger definition and usage simple example

This article describes the definition and usage o...