How to solve the problem of absolutely positioned elements mysteriously disappearing or being blocked in IE6/7

1. When the width of the adjacent floating layer of the absolutely positioned layer is not equal to the width of the parent layer, and the float is not cleared, the display is consistent in IE6/7 and FF;
2. When the width of the adjacent floating layer of the absolute positioning layer is not equal to the width of the parent layer, when the float is cleared, IE6/7 does not display the absolute positioning layer, but FF does;
3. When the width of the adjacent floating layer of the absolute positioning layer is equal to the width of the parent layer, and the floating is not cleared, IE6 does not display the absolute positioning layer, but IE7/FF displays it;
4. When the width of the adjacent floating layer of the absolute positioning layer is equal to the width of the parent layer, when the float is cleared, IE6/7 does not display the absolute positioning layer, but FF does;

The solution to this BUG is very simple. Just make sure that the absolutely positioned layer is not placed next to the floating layer. There is also an even simpler method, which is to add a blank div between the absolutely positioned element and other elements.
Let's take a look at the phenomenon where absolutely positioned elements mysteriously disappear and are blocked. First, let's understand the several positioning features involved:
1. The default z-index value of a relatively positioned element is 0.
2. When two relative positioning appear at the same time, the z-index of the code later takes precedence.
3. The child follows the z-index set by the parent; if the child sets absolute positioning and z-index, it can break through the parent to display. See the following code:

Copy code

The code is as follows:

Code explanation: There are three adjacent relatively positioned layers above. A layer with absolute positioning relative to the first layer is added. In theory, this absolutely positioned element is above the three relatively positioned elements. However, it is not displayed in reality. Trying to set the z-index value also has no effect.
The solution to this bug on the Internet is generally to use a hack to make B a negative value to reduce the level of B in IE. However, this method creates a new IE bug when the z-index is negative. According to the characteristics of positioning, this IE bug can be avoided.
On the surface, the lower layer covers the upper absolutely positioned layer. In fact, the lower layer covers the absolutely positioned parent layer. You only need to set the z-index of the parent layer to be larger than that of the layer behind it.

<<: Example code for implementing a hollow mask layer with CSS

>>: Detailed explanation of the process of docker packaging Python environment