The z-index bug InternetExplorer7

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">
<div id="wrapper">
<div id="contents">
<div id="gadget">
buttons and twitter

CSS example:

position: fixed;
top: 0;
left: 0;
z-index: 2;

position: fixed;
top: 0;
left: 0;
z-index: 5;

In this case the expected behavior is as follows.

  1. When you scroll the screen, "# menuwrapper" "# gadget" is fixed at the top of the screen "# wrapper" that only scrolls.
  2. "# 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.

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 > Articles of the year two thousand and eleven > z-index bug in Internet Explorer 7

HOMEHOME CategoryCategory HistoryHistory

Site Search :

[HTML link code]