Underlig opførsel med z-index
Hej Eksperter.Jeg har et problem jeg ikke helt kan finde en forklaring på.
Kik på siden: http://www.lissau.org/eksperten/zindex.html
Hvis du klikker på den første stjerne vises der intet, klikker du på stjerne nummer 5, kommer der en advarsel.
Det er opdelt i to billeder, hvor billedet med de grå stjerne ligger nederst med z-index 1 og så ligger billedet med de gule stjerner med z-index 2. På billedet med de gule stjerner har jeg så brugt clip og så har jeg udover det, placeret 5 divs, der skal aktiveres hver for sig. Alle disse divs (som er stjerner) har z-index 3.
På trods af at divsne har højere z-index tal, kommer der ikke nogen advarsel når jeg klikker på stjerne 1 der bliver overlappet af det klippede billede.
Er det bare en dum fejl jeg har lavet eller hvordan?
Her er koden:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
background:url(images/unrated.gif) no-repeat;
z-index:1;
width:85px;
height:17px;
margin:0px auto;
margin-top:250px;
}
.star {
width:17px;
height:17px;
z-index:3;
float:left;
}
.clear {
clear:both;
width:0px;
height:0px;
}
.rated {
background: url(images/rated.jpg) no-repeat;
position:absolute;
clip:rect(0px, 50px, 17px, 0px);
height:170px;
width:85px;
z-index:2;
}
</style>
</head>
<body>
<div id="container" onmouseout="resetRating()">
<div id="rated" class="rated"></div>
<div id="x1" class="star" onmouseover="rating(1)" onclick="alert(this.id)"></div>
<div id="x2" class="star" onmouseover="rating(2)"></div>
<div id="x3" class="star" onmouseover="rating(3)"></div>
<div id="x4" class="star" onmouseover="rating(4)"></div>
<div id="x5" class="star" onmouseover="rating(5)" onclick="alert(this.id)"></div>
</div>
<div style="clear:both; height:0px; width:0px;"></div>
</body>
</html>
