PDA

View Full Version : Problem with z-index in IE

kuvik
04-25-2007, 04:10 PM
I use negative z-index value to put image to background, but IE don't render it (FF renders it right).

My CSS for example:
#background_art{
width: 520px;
height: 280px;
position: absolute;
z-index: -1;
background-color: #FAFAD2;
margin-top: 180px;
margin-left: 476px;
}

Is there any solution to solve IE failure?
rmedek
04-25-2007, 04:45 PM
Don't use a negative index. Use a higher positive index on the object you want to bring in front of #background_art.

Or, make #background_art a background image rather than a foreground element.
koyama
04-28-2007, 10:11 PM
I use negative z-index value to put image to background, but IE don't render it (FF renders it right).

IE supports negative z-index. (although IE suffers from other z-index bugs.)

It is Firefox 2 that renders elements with negative z-index wrongly. See comparison chart (http://www.webdevout.net/browser-support-css#support-css2propsbasic-zindex).

However, I checked Gran Paradiso alpha release 2 (Firefox 3) and the bug seems to be fixed.

According to CSS 2.1 Appendix E2 (http://www.w3.org/TR/CSS21/zindex.html), elements with negative z-index can never be placed behind the background of the stacking context (although it is stacked below the contents).

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>z-index</title>
<style>
body {
background: orange;
color: black;
}
#one {
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
The yellow box must show behind the text and above the orange background.
<div id="one">
</div>
</body>
</html>
felgall
04-28-2007, 11:30 PM
Browsers are not required to support negative indexes and so they can be considered the equivalent of not specifying an index at all in those browsers that don't have a proprietary add-on to support them.
koyama
04-28-2007, 11:44 PM
Browsers are not required to support negative indexes and so they can be considered the equivalent of not specifying an index at all in those browsers that don't have a proprietary add-on to support them.
Hmm... never heard about that. Can't seem to find the reference that browsers aren't required to support negative z-indexes?