IE z-index problem

[fyo]

I'm having a problem getting IE to respect z-index when applied to a relatively positioned div with an absolutely positioned parent.

A simple example:

<div class="bigbox" style="left: 0; top: 1em; z-index: 1;">
<div class="smallbox">Item 0</div>
<div class="smallbox">Item 1
<div class="bigbox" style="left: 2em; top: 0; z-index: 99">
<div class="smallbox">Item 1a</div>
<div class="smallbox">Item 1b</div>
</div>
</div>
<div class="smallbox">Item 2</div>
<div class="smallbox">Item 3</div>
</div>

With the two classes defined as follows:

.bigbox { position: absolute; border: 1px solid black; }
.smallbox { background-color: white; position: relative; padding: 5px; }

The result is that "Item 2" overlaps "Item 1b", despite z-indices of 1 and 99, respectively. Removing "position: relative" from the smallbox class fixes the stacking issue, but wrecks what I'm trying to accomplish (this is a minimalish test case, of course).

Explicitly applying the appropriate z-indices to each and every "smallbox" makes absolutely no difference.

The problem doesn't appear in Firefox and Opera, fwiw.

Any idea how to work around this bug? (which I assume it is, unless I'm screwing something up completely, which is always a possibility).

Any help would be greatly appreciated. I'm about to pull my remaining hairs out here!

[drhowarddrfine]

Misery, thy name is IE. (http://www.aplus.co.yu/css/z-pos/index2.php)

[DSB]

Have you tried scaling your numbers?

Instead of 1, try 100. Instead of 99, try 200. If that doesn't work try setting 1 to -1. Since IE doesn't like standards you might find one that works with trial and error.

[fyo]

Misery, thy name is IE. (http://www.aplus.co.yu/css/z-pos/index2.php)
Thanks for the link. Sadly, there doesn't seem to be a "nice" workaround for this bug.

[DSB]

What markup are you using? I noticed that IE respects rules differently in XHTML vs. HTML. Worth a shot.

[harbingerOTV]

I'm having a problem getting IE to respect z-index when applied to a relatively positioned div with an absolutely positioned parent.


Well for starters that's not what your doing.

Look at your code again:


<div class="bigbox" style="left: 0; top: 1em; z-index: 1;">
<div class="smallbox">Item 0</div>
<div class="smallbox">Item 1
<div class="bigbox" style="left: 2em; top: 0; z-index: 99">
<div class="smallbox">Item 1a</div>
<div class="smallbox">Item 1b</div>
</div>
</div>
<div class="smallbox">Item 2</div>
<div class="smallbox">Item 3</div>
</div>


The red lines (smallbox) is the parent of the blue lines (bigbox). So your really trying to make a absolutely positined div z-index within a relative positioned div.

look at htis and see if you see what I mean:


<div class="bigbox" style="left: 0; top: 1em; z-index: 1;">
<div class="smallbox">Item 0</div>
<div class="smallbox" style="z-index:2">Item 1
<div class="bigbox" style="left: 2em; top: 0; z-index: 99">
<div class="smallbox">Item 1a</div>
<div class="smallbox">Item 1b</div>
</div>
</div>
<div class="smallbox">Item 2</div>
<div class="smallbox">Item 3</div>
</div>


the absolutely positioned "bigbox" will break out of the relatively positioned "smallbox" but the parent (smallbox) needs to be higher than the "smallbox"es under it in the code.

[fyo]

Well for starters that's not what your doing.

......

the absolutely positioned "bigbox" will break out of the relatively positioned "smallbox" but the parent (smallbox) needs to be higher than the "smallbox"es under it in the code.
You are correct in that I'm not doing JUST that. I have multiple (nested) absolutely and relatively positioned divs. However, IE is clearly showing it incorrectly and the link provided by drhowarddrfine:

http://www.aplus.co.yu/css/z-pos/index2.php

This is the exact same problem I am having.

I'm not sure what you are trying to say with your post (other than to point out the inaccuracy of my *description* of the problem). Are you suggesting that IE is indeed rendering it correctly?

After understanding what it is IE is doing (through the above link), I was able to create a work-around which is actually reasonable for my situation. The work-around is somewhat difficult to transfer to the minimal-ish test-case. In the case where nested div only overlaps subsequent divs, the issue could be "solved" by effectively reversing the order of (layer) preference, i.e. applying a decreasing z-index to each of the "smallbox" divs in the top-most layer.

[harbingerOTV]

Hey,

I didn't read the link that was given about all that. But looking at your code i thought I was on the right track. I still think you may be handeling it the wrong way though.

Since your doing a list type thing why not use a list?

try this out and se if it can be used for your needs:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>fyo</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
ul {
border: 1px solid #000;
width: 200px;
position: relative;
}
li {
position: relative;
}
ul li ul {
border: 1px solid #000;
position: absolute;
left: 100px;
top: 0;
background-color: #fff;
}

</style>
</head>
<body>
<ul>
<li>Item1<ul>item1a</li><li>Item 1b</li></ul></li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html>


My7 intent was not to call you out on the wrong writing. I wasjust piointing out that if you were trying to do what you said you were with the code provided your doing it wrong. Or at least thinking about it wrong. It seems your making a list with way too much mark up. Try the list example and see how it flies.

[fyo]

Since your doing a list type thing why not use a list?

I am using lists in my "real" code. As part of creating a minimal test case (and general bug-searching), I recreated it with DIVs. There's no way you could have known this, of course ;-)

I really do appreciate it, but converting to lists doesn't solve the problem.

Your suggestion, by the way, suffers from EXACTLY the same problem, you just can't see it with the current markup. Try adding background-color: white to you li's. Voila, the bug rears its head again.