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.