How to solve the problem that vue style laminated z-index doesn't work

This article "vue style cascading z-index does not work how to solve" the knowledge of most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this "vue style cascade z-index does not work how to solve" article it.

Z-index doesn't work.

Problem: when clicking on the element pop-up box, there is a problem of stacking with the current page (using the style z-index without success), resulting in the pop-up page cannot be entered.

The effect of the problem is as follows:

The two drop-down boxes here and the echarts chart and pop-up box change passwords are stacked.

The solution is as follows:

At first, I found myself in the hierarchy for a long time, but failed to solve the problem (using the style z-index to no avail). Later, I found that the last developer brother used the style in both the drop-down box and the echarts chart.

Position: absolute

So that it can't be realized.

Implementation: delete to the relevant style and layout the components in a new way.

The final results are as follows:

Here only provide ideas, the code is too cumbersome not to stick out, hope to help everyone Oh!

Causes of z-index failure

1. In general, z-index is used when there are two overlapping tags, and under certain circumstances, one of them appears on top of the other.

2. The higher the z-index value is, the higher it is in the upper layer. The position attribute of the z index element is relative,absolute or fixed.

3. Z-index will fail under certain circumstances.

When ① and the parent element position are relative, the z-index of the child element is invalid.

Solution: the parent element position is changed to absolute or static

②, the element does not set the position attribute to a non-static attribute.

Solution: set the position attribute of the element to either relative,absolute or fixed.

③, this tag not only sets z-index, but also sets float float

Solution: float removal, changed to display:inline-block

The above is about the content of this article on "vue style stacked z-index does not work". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.