z-index

Status
Nicht offen für weitere Antworten.

NemoFinder

Mitglied
Hallo,
der z-index funktioniert nicht so wie ich es will. Ich habe zwei Grafiken. Eine Landkarte (Grafik 1) auf auf denen ich einige Städte mit einem Kreis (Grafik 2) markiere. Wenn ich mit dem Mauszeiger über Grafik 2 gehe öffnet sich auch eine Infobox, wie es soll. Leider wir diese Infobox von einigen Grafiken 2 überlagert. Die im CSS geschriebene z-index:3 wird nicht angenommen. Dort kann ich jetzt Zahl einfügen aber es ändert nichts.

PHP:
<?
   $query = mysql_query("SELECT * FROM stadt ORDER BY 'name'") or die(mysql_error());
   while($t = mysql_fetch_array($query))
   $out .= "<div id='box' style='position:absolute;top:".$t[x]."px;left:".$t[y]."px; z-index:2;'>
              <img src='".$t[team_id].".gif'>
                <div>
            	<p><strong>".$t[name]."</strong></p>
          	<p>".$t[Karte]."</p>
                </div>
            </div>";
?>
HTML:
<html>
<head>
<title>Deutschland</title>
<style type="text/css">
<!--
img {
border:none;
}

#box div{display:none;}

#box:hover div{
background:#ffff00;
display:block;
width:100px;
position:absolute;top:20px;left:20px;
border:1px dashed black;
padding:2px;
font:normal 12px verdana, sans-serif;
z-index:3;
}
-->
</style>

</head>
<body>
  <div style="position:absolute;top:9px;left:9px;z-index:1;"><img src="karte.gif" border="0"></div>
  <? echo $out; ?>
</body>
</html>
 
Hallo,

da hier nicht das PHP-Forum ist, wäre es ganz prima, wenn du nur den geparsten und relevanten HTML- und CSS-Quelltext zeigen würdest.

Dein Problem liegt vermutlich in der unterschiedlichen Spezifität der CSS-Deklaration für den z-Index. Verlege mal möglichst alle CSS-Deklarationen in den Header der HTML-Datei und lass nur die notwendigen (TOP- und LEFT-Werte) in den Inline-Styles.

Übrigens: Wieviel DIV-Blöcke mit der id="box" hast du in deiner HTML-Datei?
 
Hi,

der geparste PHP-Code, sprich der vom Browser ausgegebene HTML-Code wäre hier in der Tat aufschlussreicher, denn mit dem aus deinen Code-Schnipseln hergeleiteten Quellcode kann ich soweit keine Probleme bei der Schichtpositionierung ausmachen:

demo_NemoFinder.jpg

mfg Maik
 
Hallo,

die Ursache des Problems liegt nicht wie zunächst von mir vermutet in der Spezifität. Vielmehr wird mit jedem "box"-DIV-Block, wenn er eine z-Index-Deklaration enthält, ein lokaler Stapelkontext eingerichtet.

CSS2-Empfehlungen:
..., aber andere Elemente können lokale Stapelkontexte einrichten. Stapelkontexte werden vererbt. Ein lokaler Stapelkontext ist atomar; Boxen aus anderen Stapelkontexten dürfen nicht zwischen seine Boxen gelangen.
Deshalb alle unnötigen z-Index-Deklarationen entfernen - das sind eigentlich alle, ausgenommen die hover-Pseudoklasse.
 
Status
Nicht offen für weitere Antworten.
Zurück