|
|||
Positionierung z-index und IE
Hallo
der IE bereitet mir mal wieder Probleme bei der Positionierung von Elementen. Ich habe ein "Eltern"-Div mit einer relativen Positionierung und ein "Kind"-Div darinliegend, mit einer absoluten Positionierung. Soweit ich das bisher kenne, richtet sich nun die absolute Positionierung des Kindelements an der relativen Positionierung des Elternelements. Im Firefox wird das auch richtig umgesetzt. Auf der Grafik kann man sehen das der weiße Test-Block durch den gesetzen z-index den nächsten grünen Block überdeckt. Beim IE ist das allerdings nicht der Fall. Weiß jemand warum das so ist ?? Hier der Beispiel-Code Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title> Untitled Document </title> <style type="text/css"> .parent{ position:relative; width:50px; height:50px; background:green; border:1px solid white; } .child{ position:absolute; top:10px; left:10px; z-index:10; width:200px; height:200px; background:white; border:1px solid black; } </style> </head> <body> <div class="parent"> <div class="child"> test </div> </div> <div class="parent"> <div class="child"> test </div> </div> </body> </html> Geändert von Blub (09.12.2007 um 16:30 Uhr) |
Sponsored Links |
|
|||
Der IE schafft auch dann einen neuen Stacking Context, wenn kein z-index angegegeben ist. Er verhält sich also, also stünde bei .parent jeweils z-index:0 dabei.
Bitte schreib deine Style-Angaben untereinander, damit auch Menschen sie lesen können. Danke. |
Sponsored Links |
|
|||
Zitat:
Das Problem ist, wie bringe ich es dem IE bei, dies nicht zu tun. Die Grünen Boxen sollen später Adress-Blöcke von Personen darstellen und das jeweilige weiße Test-Div ist ein Tooltip das bei Mouseover der Adress-Anzeige eingeblendet wird. Nun soll natürlich der Tooltip nicht unterhalb des nächsten Adress-Blocks angezeigt werden sondern darüber. Ich weiß nicht wie ich den Tooltip positionieren soll, damit er 1. sich an seinem jeweiligen Elternelement (Adress-Block) ausrichtet und 2. den nächsten Adressblock (auch im IE) überdeckt. Habs nun etwas leserlicher dargestellt. |
|
|||
Gar nicht.
Zitat:
|
|
|||
Hab ich mir fast gedacht.
Zitat:
Klappt so wunderbar, vielen vielen Dank!! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title> Untitled Document </title> <style type="text/css"> .parent-by-event{ position:relative; width:50px; height:50px; background:green; border:1px solid white; } .parent{ width:50px; height:50px; background:green; border:1px solid white; } .child{ position:absolute; top:10px; left:10px; z-index:10; width:200px; height:200px; background:white; border:1px solid black; } </style> </head> <body> <div class="parent-by-event"> <div class="child"> test </div> </div> <div class="parent"> </div> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Firefox 4 und Positionierung | ChOpSueY! | CSS | 2 | 09.05.2011 23:04 |
ich habe totale Schwerigkeiten mit Absolute und Relative Positionierung?!? | damonster | CSS | 12 | 27.08.2008 16:56 |
komplexe Positionierung | new user | CSS | 1 | 19.09.2007 12:51 |
Barrierefreiheit - Absolute Positionierung | dbub | Barrierefreiheit | 19 | 13.06.2007 17:58 |