The problem is more deeply rooted than you think and IE7 has the right to render it the way it does. Because z-index works among the siblings. Say for example you have two sibling divs that overlap, one with z-index 3 (let's call it red) and one with 1 (let's call it blue). The red one will be on top. If you put another div with z-index 100 (this one will be yellow) in the div with z-index 1, the red one will still be on top, since yellow is a child of blue and blue is on a lower layer than red. If no z-index is specified, then elements lower in the code will be on the higher layer.
But of course, z-index only affects positioned elements. So, when element is statically positioned (default position state), any positioned (relative, absolute or fixed) element with a non-negative z-index will appear above the non-positioned element. Let's simply say that non-positioned elements are all on z-index 0.
Now we come to the problem. Your person divs are relatively positioned. That means they are no longer on z-index 0. And since they (each specifically) do not have a z-index, it means every successive one is on a higher layer. As was mentioned in the first paragraph, anything that is within the div, regardless of its individual z-index will be below the next div, because person divs are siblings and all other elements are their children. Therefore even z-index 999 inside the first person will be lower than z-index 1 in the second person, because the whole second person is higher.
Ok, so let's fix it now. You can float them to the right. Then they will follow each other different way and the last will appear the first and you're ok. But that might not work for you. A more intelligent solution is to get rid of the relative positioning on the person div. I know, you need it to position the tooltip. But, knowing that without any values on their position (top, left, right, bottom), absolutely positioned divs will appear just as if they would normally follow the document flow. Using this knowledge and some negative margins, you can achieve the same result as you have, doing something like this:
Code:
.person {float:left; width: 110px;padding: 10px 40px 10px 0; [s][!]position:relative;[/!][/s] }
.person img {margin: 0 auto;text-align:center;[s][!]position:relative;z-index:1;[/!][/s]}
.person span {text-align:center;[s][!]relative;z-index:2;[/!][/s]}
.person .tooltip {[!][s]display: none;[/s] position:absolute; left: -9999em;[/!] }
.person:hover .tooltip {[!][s]position:absolute; top:2em; left:1em;[/s] left:auto; margin: -110px 0 0 1em;[/!] width:15em;border: dashed 1px #f00;background-color: #fff5f6;padding: 5px;z-index:999; display:block;}
___________________________________________________________
[small]Do something about world cancer today:
PACT[/small]
