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)
1. The window size opened by the HTML hyperlink C...
1. golang:latest base image mkdir gotest touch ma...
<br />Not long ago, due to business needs, I...
On Linux, bash is adopted as the standard, which ...
1. The concept of css: (Cascading Style Sheet) Ad...
When the amount of data in MySQL is large, limit ...
In the actual projects I participated in, I found...
This article mainly introduces 6 solutions to the...
Preface: MySQL master-slave architecture should b...
When using HTML tables, we sometimes need to chan...
According to Chinese custom, we are still celebra...
1. Write a split script (splitNginxLog.sh) * Beca...
Project scenario: There is a <ul> tag on th...
This article example shares the specific code of ...
Table of contents 1. Introduction to built-in obj...