Invalid Z-index problem

Scenario description

There is a pop-up component today , There is a pull-down component in the pop-up window , But after the pull-down component is pulled down , The extra part , Covered by the pop-up window assembly

z-index Several invalid situations and solutions

The parent element sets overflow:hidden|auto /display:none/

If the parent element has set overflow:hidden /display:none/ etc. , Then if the child element is absolutely positioned outside the parent element , Then adjust the sub elements z-index May not show .

.father {
    
  display: none;
  opacity: 0;
  overflow: hidden; (auto)
  position: relative;
}
.son {
    
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}

Solution

Cancel the above attributes of the parent element .

The parent element level is low

<div style="z-index: 1">
  <div style="z-index: 10">son</div>
</div>
<div style="z-index: 2"></div>

The first parent DIV The hierarchy is 1, Second parent DIV The hierarchy is 2, Children within the first parent DIV yes 10. Due to the difference between parents , So internal children z-index The setting is very big , Will not be promoted to the upper level of the second parent , That's why z-index Invalid illusion .

Solution

View the parent element z-index And modify it

No positioning is set

Use z-index The premise is , Need to set up div Of location （eg: position: absolute;） If the element is a standard stream , No location , Then set z-index Does not make the current element above another element .

Solution

Set the positioning of the current element and parent element

Development reminder

Can be z-index Values are maintained in a single place , Avoid z-index Value chaos

Reference resources

z-index Invalid solutions