Solutions to the disappearance or obstruction of IE absolute positioning Elements

From: http://www.jb51.net/css/34227.html

1. When the width of the floating layer adjacent to the absolute positioning layer is not equal to the width of the parent layer, and the floating layer is not cleared, IE6/7, FF are consistent;
2. When the width of the floating layer adjacent to the absolute positioning layer is not equal to the width of the parent layer, IE6/7 does not display the absolute positioning layer, and FF does not display the floating layer;
3. When the width of the floating layer adjacent to the absolute positioning layer is equal to the width of the parent layer, and the floating layer is not cleared, IE6 does not display the absolute positioning layer, and IE7/FF does not;
4. When the width of the floating layer adjacent to the absolute positioning layer is equal to the width of the parent layer, IE6/7 does not display the absolute positioning layer, and FF does not display the floating layer;
The solution to this bug is also very simple, so that the absolute positioning layer is not placed next to the floating layer, there is a simpler method, add a blank Div between the absolute positioning element and other elements.
Let's take a look at the phenomenon that the absolute positioning element disappears mysteriously and is blocked.
First, let's take a look at the positioning features involved:
1. The default Z-index value of the relative positioning element is 0.
2. When two relative positions appear at the same time,CodeThe backend Z-index takes priority.
3. The child level follows the Z-index set by the parent level. If the child level has an absolute position and a z-index set, it can break through the display of the parent level.
See the following code:

<Div style = "position: relative; Background: # ff0000; width: 200px; Height: 100px;">
<Div style = "position: absolute; Background: # FFFF00; width: 49px; Height: 50px; left: pixel PX; top: 310px; Z-index: 100 "> </div>
</Div>
<Div style = "position: relative; Background: #000000; width: 200px; Height: 100px;"> </div>
<Div style = "position: relative; Background: # 9900ff; width: 200px; Height: 100px;"> </div>

Code explanation: the above is three adjacent relative positioning layers. In the first layer, a layer relative to its absolute positioning is added. According to theory, the absolute positioning element is on top of the three relative positioning elements, but it is not actually displayed. The attempt to set the Z-index value is invalid.
The solution to this bug on the internet is generally to use hack to make B negative, to reduce the level of B in IE
However, this method generates a new ie bug when Z-index is negative.
According to the positioning features, this bug of IE can be avoided.
On the surface, the following layers cover the absolute positioning layer. In fact, the following layers cover the parent layer of absolute positioning, you only need to set the Z-index of the parent layer to be greater than the subsequent layer.