Thu, 2006-02-09 20:03
Hi,
I was doing some css experimenting, and stumbled across the following: I can't change the z-index of an <a>-tag in the hover-state! What's up with that? Is this really impossible?
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Expanding links</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 5px;
}
ul{
position: absolute;
top: 50px;
list-style: none;
}
li{ float: left; }
a:link,a:visited,a:active{
position: relative;
display: block;
height: 15px;
width: 100px;
overflow: hidden;
text-decoration: none;
color: #fff;
padding: 5px 5px 0 5px;
}
a:hover{ z-index: 5; }
a#op1{ background-color: #390; z-index: 1; left: 0; }
a#op2{ background-color: #f36; z-index: 2; right: 50px; }
a#op3{ background-color: #06f; z-index: 3; right: 100px; }
a#op4{ background-color: #f30; z-index: 4; right: 150px; }
a#op5{ background-color: #fc0; z-index: 5; right: 200px; }
</style>
</head>
<body>
<ul>
<li><a href="#1" id="op1">Option 1</a></li>
<li><a href="#2" id="op2">Option 2</a></li>
<li><a href="#3" id="op3">Option 3</a></li>
<li><a href="#4" id="op4">Option 4</a></li>
<li><a href="#5" id="op5">Option 5</a></li>
</ul>
</body>
</html>
Thu, 2006-02-09 20:47
#1
z-index experiments
z-index isn't an absolute. Its relative to its siblings and its parent (which has a z-index of zero relative to its children).
So, you are changing the z-index. Its just changing the z-index in the way that you have isn't meaningful.
You need to change the z-index on the li element, since they are the nearest common siblings of the links.