How to solve the problem of invalid adjustment of z-index attribute of div layer

This article mainly introduces the analysis and solutions to the reasons for the invalid adjustment of the z-index attribute of the p layer. Friends in need can refer to the following

z-index is invalid

In the process of doing it , I discovered a very simple problem that many people should encounter. Setting the Z-INDEX attribute is invalid. In CSS, the level can only be changed through code. This attribute is z-index. There is a small prerequisite for z-index to work, that is, the position attribute of the element must be relative, absolute or fixed.

1. The first situation (z-index does not work no matter how high it is set):

There are three conditions for this situation to occur:

1. The position attribute of the parent tag is relative;
2. The question tag has no position attribute (excluding static);
3. The question tag contains a float attribute.

eg: The z-index level does not work. Floating will invalidate the z-index. The code is as follows:

<p style="POSITION: relative; Z-INDEX: 9999">  
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">  
</p>

There are three solutions (any one is sufficient):

1. Change position: relative to position: absolute;
2. Add position attributes (such as relative, absolute, etc.) to floating elements;
3. Remove floating.

2. In the second case

Under IE6, the performance of the hierarchy sometimes does not depend on the z-index of the sub-tag, but on the entire DOM tree ( The level of the parent tag of the first relative attribute of the node tree).

eg: IE7 and IE6 have the same bug. The reason is very simple. Although the current father level of the page where the picture is located is very high (1000), because the father's father is not useful, it is pitiful like 9999. Strong children have no future! , the code is as follows:

<p style="POSITION: relative">
<p style="POSITION: relative; Z-INDEX: 1000">
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>
</p> 
</p>

Solution: Add a higher level (z-index: 1) to the first relative attribute, the code is as follows:

<p style="POSITION: relative; Z-INDEX: 1">  
<p style="POSITION: relative; Z-INDEX: 1000">  
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>  
</p>  
</p>

The above is the entire article Content, I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About CSS3 Analysis of rem (set font size)

The above is the detailed content of How to solve the problem of invalid adjustment of z-index attribute of div layer. For more information, please follow other related articles on the PHP Chinese website!