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.