Floating list, tooltip and z-index issue

HTML & CSS
1

Here is my nemesis.

It´s a list with floating li´s, a link in each one, which is bleeding the li.

In FF etc, the link is positioned correctly above the next li, in IE6-7, the link is stacked behind the next li.

I guess this is a z-index-problem, right?


<body>

<ul>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
</ul>

</body>



ul {list-style:none;}

li {
	position:relative;
	width:100px;
	height:100px;
	float:left;
	background-color:#DDDDDD;
	border:1px solid #AAAAAA;
	margin-left:10px;
}

li a { 
	position:absolute;
	display:block;
	top:30px;
	left:40px;
	height:80px;
	width:80px;
	border:1px solid green;
	background-color:#CCCCCC;
	z-index:1;
}
2

Hi,

Yes it’s a bug in IE7 and under where the position:relative infers z-index:0 on the parent instead of z-index:auto.

This means that all parents are z-index:0 and therefore it doesn’t matter what z-index the children are as they will always be within a parent with a z-index of zero.

So in effect all parent list elements are z-index:0 and therefore according to usual browser rules the ones later in the html will sit on top of elements earlier in the html where they have the same z-index which is exactly what happens in IE.

There are two solutions.

You could add a class to each list element and apply a descending z-index in order so that each list subsequent lists gets a lower z-index than its predecessor which will allow the previous element to be on top.

Or you could remove the position:relative from the parent so that there is no stacking context but then only move the absolute element using margins.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul {
    list-style:none;
}
li {
    width:100px;
    height:100px;
    float:left;
    background-color:#DDDDDD;
    border:1px solid #AAAAAA;
    margin-left:10px;
}
li a {
    position:absolute;
    display:block;
    margin-top:30px;
    margin-left:40px;
    height:80px;
    width:80px;
    border:1px solid green;
    background-color:#CCCCCC;
    z-index:1;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
</body>
</html>

Bear in mind that in IE text-alignment other than text-align:left on the parent will affect the position of the absolute element.

Hope that helps :slight_smile:

3

Seems to work. I´ll check it out later in my actual context. Thanks so far.