✔ "z-index" Problem

SebiPuck

SebiPuck

Erfahrenes Mitglied
Hallo.
Ich habe ein Problem auf meiner Website:
http://the-cave.net/staff/#

Wenn man über den Avatar eines Users "hovert", sollte ein CSS Tooltip erscheinen. Leider ist dies dann trotz position: relative; und z-index Zuweisung dann unter dem Avater eines anderen Users.

Was muss ich dem CSS Code wo hinzufügen, damit es funktioniert ?
LG
 
Hallo,
das liegt an dem position: relative der Klasse tooltipWrapper. Dadurch das du diese Element relativ positionierst bezieht sich die absolute Positionierung hierauf und nicht auf ein Element welches alle deine Avatare umschließt. Das musst du wie eine abgeschlossene Hemisphere bzgl. z-index sehen.
Setze mal den z-index-Wert des letzten Avatars auf -1 dann funktioniert es.

Entweder du weißt jedem Avatar (tooltipWrapper) seine eigene z-index Ebene zu oder du baust es so um das diese mittels absoluter positionierung Positioniert werden.
Eine weitere Möglichkeit welche auch funktionieren sollte wäre das du mit einem Wrapper arbeitest welcher absolut positioniert wird.

Viele Grüße
 
Jan-Frederik Stieler hat gesagt.:
Hallo,
das liegt an dem position: relative der Klasse tooltipWrapper. Dadurch das du diese Element relativ positionierst bezieht sich die absolute Positionierung hierauf und nicht auf ein Element welches alle deine Avatare umschließt. Das musst du wie eine abgeschlossene Hemisphere bzgl. z-index sehen.
Setze mal den z-index-Wert des letzten Avatars auf -1 dann funktioniert es.

Entweder du weißt jedem Avatar (tooltipWrapper) seine eigene z-index Ebene zu oder du baust es so um das diese mittels absoluter positionierung Positioniert werden.
Eine weitere Möglichkeit welche auch funktionieren sollte wäre das du mit einem Wrapper arbeitest welcher absolut positioniert wird.

Viele Grüße
Zum Vergrößern anklicken....

Hei.
Danke erstmal. Ich habe nun jedem "tooltipWrapper" einen eigenen z-index verpasst, welcher mit jedem Avatar um "1" kleiner wird.
Leider kann ich den tooltip nun nur bei dem 1. Avatar nutzen, bei jedem weiteren kann ich nun nicht mal mehr hovern ...
LG
 
Hi,
okay, das mit dem -1 war jetzt auch eher zu Testzwecken gedacht. Grundsätzlich sollte man negative Werte vermeiden da, soweit ich weiß der IE Probleme mit hat.
Wenn du deinem letzten Avatar den z-index null gibst und dem ersten den höchsten dann funktioniert es.

EDIT: Oder so wie Spicelab geschrieben hat. Die Lösung ist natürlich etwas einfacher :).

Grüße
 
Also bei mir sidn die Tooltips auch unter den Grafiken. Konnte das Problem (zumindest im Chrome) lösen, indem ich "-webkit-transform: translateZ(0);*/" rausgenommen habe aus den Styleangaben für die Tooltips... Was soll das überhaupt machen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück