In css, z-index does not work. Solution

The first point is consistent with mine, but I changed it to position: absolute, and the problem still exists. The second and third points do not match my situation.

The next step is layer-by-layer Tracing. We find that we can add "position: relative; z-index: 100;" to the parent layer (B) with A relatively higher level of, it turns out that layer B is lower than the adjacent layer (C), resulting in any layer in layer B no matter how to set the z-index, it is also higher than the C layer adjacent to the B layer.

The second time, any browser does not work, it is a layer-by-layer chase, and a parent layer of this layer contains "overflow: hidden ;", in this way, any layer under this parent layer uses z-index to be overwritten by the layer adjacent to this parent layer.

Some necessary descriptions about effect screenshots
The following is not nonsense. It is to make it easier for me to understand the content below.

The background of the screenshots of all the following results is as follows:
1. The page is fixed and static, and the luxury home will not be delivered from a good black background, with a transparency of 40%. The level displayed on almost full screen is the absolute positioning layer of 1. HTML:<Div id = "blank"> </div>, Corresponding CSS:# Blank {width: 100%; height: 600px; background: black; opacity: 0.4; filter: alpha (opacity = 40); position: absolute; left: 0; top: 0; z-index: 1 ;}

The role is to make hierarchical relationships clear at a glance. See:

This indicates that the content is under the absolute positioning layer where z-index is 1.

This indicates that the content is above the absolute positioning layer where z-index is 1.

2. Beautiful pictures are compared on the page. The pictures are easily identified on the semi-transparent black absolute positioning layer, you will be able to have a very intuitive understanding of what I call z-index does not work.

III. Complaints from IE6: Floating makes me sink
Now, I am going to talk about the cause and solution of the problem. First, let's talk about the first kind of z-index that does not work no matter how high it is set. There are three conditions for this situation: 1. The parent tag position attribute is relative; 2. The problem tag does not have the position attribute (excluding static); 3. The problem tag contains float) attribute.
You can perform a simple test with the following code:

<Div id = "blank"> </div> <div style = "position: relative; z-index: 9999;">  </div>

Ya, the z-index is all 9999, and the level is high enough. However, see the figure below:

This is a problem. Some people may wonder if this is because IE6 relative caught a cold rather than float carrying the "A-stream virus ". Okay, I will remove floating now. The HTML code is as follows:

<Div id = "blank"> </div> <div style = "position: relative; z-index: 9999; ">  </div>

Result IE6: