Eigenartiges Verhalten von position:relative

Folgendes reduziertes Beispiel:

<html><head></head><body>

<style>
.klapplink {
float: right;
width: 200px;
z-index:10;
}

.klapplink a {
color:#008000;
font:bold 16px Arial, Helvetica, sans-serif;
text-decoration:none;
}

.klapplink a:hover {
color:black;
}
</style>

<div class="klapplink"><a href="#">Hier</a></div>

<div style="position:relative; top:0px; left:0px;">
<img src="" width="400" height="400">
</div>

</body></html>

Kann mir jemand erklären, warum das hover nicht mehr greift, wenn ich position:relative beim letzten div-Element hinzufüge? Die Position vom Bild ändert sich dadurch ja überhaupt nicht. Mit float:left geht es wieder, visuell gibt es auch damit keinen Unterschied. Der Browser tut fast so, als wäre das Bild eigentlich auf der rechten Seite und würde den Link verdecken.
Wie kommt das?

Scheppertreiber

1. <style> gehört in <head>
2. <img> benötigt auch eine Angabe des Bildes
3. bei <style> fehlt das type-Attribut
4. DOCTYPE fehlt

Erstmal in Ordnung bringen, dann weiter ...

Naja, das ist im Original schon in Ordnung.
Hier nochmal ein korrekte Version des Beispiels:

<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Blubb</title>
<style type="text/css">
.klapplink {
float: right;
width: 200px;
z-index:10;
}

.klapplink a {
color:#008000;
font:bold 16px Arial, Helvetica, sans-serif;
text-decoration:none;
}

.klapplink a:hover {
color:black;
}
</style>
</head>

<body>

<div class="klapplink"><a href="#">Hier</a></div>

<div style="position:relative; top:0px; left:0px;">
<img src="blubb.gif" width="400" height="400">
</div>

</body></html>

Mit DOCTYPE-Angabe lässt sich das hier nicht posten, man denke sich ein
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> dazu.

Scheppertreiber

Die zweite div überdeckt den Link. Wenn Du die zB 200px breit machst
funktioniert die Geschichte.

Oder gleich so:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Blubb</title>
  <style type="text/css">
    .klapplink { float: right; width: 200px; z-index:10; }
    .klapplink a { color:#008000; font:bold 16px Arial, Helvetica, sans-serif; text-decoration:none; }
    .klapplink a:hover { color:black; }
  </style>
</head>

<body>
  <div>
    <div class="klapplink"><a href="#">Hier</a></div>
    <img src="blubb.gif" width="400" height="400">
  </div>

</body>
</html>

Innerhalb der div floatet der Link rechts. Der Kram beeinflußt sich dann nicht mehr.

Ja danke, das dürfte so funktionieren. Dass das div-Element den Link verdeckt ist natürlich einleuchtend, ich verstehe allerdings noch nicht ganz, warum das div-Element erst mit position:relative "undurchsichtig" wird. Ist das so vorgesehen?

Scheppertreiber

position:relative ist so 'ne Sache ...

In diesem Fall unnötig. Du floatest ein Element und hast keins vorgesehen
in dem das stattfinden kann. Deine Struktur war nicht logisch. Dazu kommen
noch so Effekte mit dem fehlenden clear.

Zieh Dir http://www.little-boxes.de/ das mal rein, da ist das sehr
gut erklärt.