Reprinted IE6/7 absolute Positioning Solution for the mysterious disappearance or obstruction of Elements

Reprinted IE6/7 absolute Positioning Solution for the mysterious disappearance or obstruction of Elements

(15:39:45)

ReprintedBytes

Tags: Positionabsoluterelative

Category: Interface Design

IE6/7 absolute positioning elements disappear mysteriously or are blocked

During the design of webpage layout, relative positioning is often set as needed, and absolute and floating positioning suddenly finds a strange phenomenon recently: absolute positioning elements in IE6 disappear or are blocked, first, the absolute positioning element of IE disappears mysteriously, and the absolute positioning Element Set suddenly disappears from the IE browser. However, Firefox can be displayed normally. try to clear the floating operation on the absolute positioning element. It can be displayed under IE, but it appears inexplicably white. It is displayed normally under Firefox. at least this phenomenon indicates that the absolute positioning element disappears mysteriously under ie6. it is related to the floating positioning of adjacent elements.

After checking the relevant information, Gao Ren explained the following:

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.In a simple 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, the z-index behind the Code takes precedence.
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, when the value of z-index is negative, a new ie bug is generated. The 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.