1 reply [Last post]
Last seen: 14 years 14 weeks ago
Joined: 2005-09-20
Posts: 1
Points: 0


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">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Expanding links</title>
		<style type="text/css">
				font-family: Arial, Helvetica, sans-serif;
				font-size: 12px;
				letter-spacing: 5px;
				position: absolute;
				top: 50px;
				list-style: none;
			li{	float: left; }
				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;	}

			<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>

Chris..S's picture
Last seen: 8 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.