Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.