Internet Explorer 7 (IE7) in, CSS, "position: absolute" and "z-index" has a bug when setting the display and not as intended.
Sample HTML:
<div id="menuwrapper"> Header </div> <div id="wrapper"> <div id="contents"> Contents </div> <div id="gadget"> buttons and twitter </div> </div>
CSS example:
#menuwrapper{
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
#gadget{
position: fixed;
top: 0;
left: 0;
z-index: 5;
}
In this case the expected behavior is as follows.
- When you scroll the screen, "# menuwrapper" "# gadget" is fixed at the top of the screen "# wrapper" that only scrolls.
- "# Menuwrapper" "# gadget" that overlap each other, "# gadget" that appears above.
The figure has become the expected behavior as this (Firefox in cases.)
However, IE7 not work as expected as in the figure below.
The reason is
What a limited, but IE7, z-index is used to specify the stacking order of tiers around the same purpose, was not given the global front and rear.
http://www.komacchi.com/blogs/2009/08/cssie7z-index.php
In other words, the above example "# gadget" how much can specify a z-index "# wrapper" only changes the order of Ai during the overlap.
It is located in another block and "# menuwrapper" does not change the order of overlap between the Ai.
The solution is, HTML not only seem to change position.
Tags: CSS
HOME
Category
History