Summary of some bugs related to IE

During webpage layout, relative, absolute, and floating positioning are often set as needed. A wonderful phenomenon is found: I checked the relevant information, and Gao Ren explained this: 1. when the width of the adjacent floating layer of the absolute positioning layer is not equal to the width of the parent layer, and the floating is not cleared, IE6/7, FF are consistent; 2. when the width of the adjacent floating layer of 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 display. 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, IE7/FF displays; 4. when the width of the adjacent floating layer of the absolute positioning layer is equal to the width of the parent layer, when floating is cleared, IE6/7 does not display the absolute positioning layer, FF is displayed; 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 several positioning features involved: 1. The default value of the relative positioning element's Z-index is 0.
2. When two relative positions appear at the same time, Code The 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 Z-index set, you can break through the parent level to display the following code:
View sourceprint?

1	<DivStyle="Position: relative; Background: # ff0000; width: 200px; Height: 100px ;">

2	<DivStyle="Position: absolute; Background: # FFFF00; width: 49px; Height: 50px; left: pixel PX; top: 310px; Z-index: 100"> </Div>

3

</Div>

4	<DivStyle="Position: relative; Background: #000000; width: 200px; Height: 100px ;"> </Div>

5	<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 generally uses hack to make B negative, to reduce the level of B in IE. However, when Z-index is negative, A new ie bug is generated. According to the positioning characteristics, this bug of IE can be avoided. On the surface, the following layer covers the absolute positioning layer above, in fact, the following layers cover the parent layer that is absolutely positioned. You only need to set the Z-index of the parent layer to be greater than the subsequent layers.