Solutions to the disappearance or obstruction of IE absolute positioning Elements

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.