Wednesday, September 23, 2009

IE6 and z-index

Recently I came across a problem where in an HTML select box,present in the background, was being shown in spite of a tool tip being in the foreground, both sharing the same area on the screen.This problem used to come only in IE6 or earlier.

So with little knowledge of css my first direction was to understand the working of the z-index property.The z-index property allows you to stack elements in html on the z-axis.Consider z-axis being perpendicular to your monitor screen.The higher the value the higher will be the element in the stack and it would hide all the lower z-index elements sharing the same area on the screen.

After a lot of investigation and headache I found that it is a known bug present in the IE6 and <.In IE6 all windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.Since select box being a windowed element it used to always paint it self at the top no matter what z-index you specify. For more kindly visit the following link

No comments: