Absolute position: absolute in IE is invalid.

Source: Internet
Author: User
Tags relative blank page

In IE (including IE10), the position: absolute a tag or other tags are invalid. Obviously, this is a magic bug. In this case, z-index, and so on. but it's okay to add some familiarity to this label.
This should be related to the document mode. For details, wait for the time to study
CSS:

The code is as follows: Copy code

A {
/* Add the background color */
Background-color: #000;
/* Or add a border */
Border: 1px solid # fff;
/* Or add a background image */
Background-image: url(xxx.jpg)
/* Or add a blank page Command */
Background-image: url (about: blank );
}

If you use both z-index and position: absolute, it will also become invalid.

If no z-index is defined for the parent container, the z-index of the sub-container cannot take effect. The premise is that the parent container has relative positioning and the sub-container has absolute positioning.

For example:

Red, green, and blue color blocks
Red, blue, and both define the position: relative
Green is a red sub-container, and green defines position: absolute; z-index: 10;
In IE browsers, the green block's z-index: 10 is invalid and is blocked by the blue block.
To solve this bug, you must define a z-index in the red block style.

Effect before resolving IE bug


Effect of solving IE bug: (add the z-index attribute to the parent container)


The red block and the blue block belong to their peers. Only the z-index of the red block is greater than the blue block of their peers,
The sub-level of the red block can play a role (that is, on the blue block or the sub-level of the blue block ),
The default value of z-index in ie6 is 0. Therefore, you must set the z-index value of the red block to greater than 0, that is, it is larger than the blue block.

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.