✔ z-index Problem

arraybreak

arraybreak

Erfahrenes Mitglied
Habe gerade ein Problem das ich irgend wie nicht lösen kann.
Ich habe ein Menü und ein Formular die sich in Quere kommen.

Ich glaube dass es irgend wie mit "position: relative und absolute" zusammen hängt, komme aber nicht drauf wie ich das lösen kann.

Mein Menü:
PHP: 
.menu {
    position:relative;
    z-index:101;
.....
}

Mein Formular:
PHP: 
.formular {
    position:absolute;
    z-index:200;
.....
}

Obwohl der "z-index" beim Formular höher ist (auf 200) erscheint er unter dem Menü. Wo ist das Problem?

Für eure Hilfe wäre ich sehr dankbar.

Gruß arraybreak
 
Ist das Problem auf allen Browsern zu sehen? Der IE hat angeblich die Angewohnheit, nicht so ganz sauber mit z-indexes umgehen zu wollen.. (und ich gehe davon aus, dass die Seite standards-konform ist.. siehe quirksmode oder Hier)

mfg chmee
 
Auf Firefox, IE9 und Safari läuft es nicht. Irgend wo hab ich irgend was gelesen dass es mit der "position"-angabe zu tun hat.
 
Kannst Du das Seitenkonstrukt mal in jsfiddle hinbauen? Dann lässt sich besser gemeinsam suchen :)

mfg chmee
 
Obwohl der "z-index" beim Formular höher ist (auf 200) erscheint er unter dem Menü. Wo ist das Problem?
Zum Vergrößern anklicken....

Welches "unter" ist gemeint? Wenn es auf der y-Achse unterhalb des Menüs liegt, dann liegt es an der Positionierung. Dafür bräuchtest du aber mA nur die top/left-Angaben des Formulars anpassen. Ansonsten hängt es vielleicht an anderen Elemente, die ebenfalls einen Z-Index zugewiesen bekommen haben.
In beiden Fällen wäre mehr Code (HTML-Quelltext und CSS) hilfreich. chmee spricht von dieser Seite, da sind längere Quelltexte übersichtlicher zu analysieren.
 
Ok, das ist lediglich ein Copy&Paste mit Kürzungen. Habe gehofft, Du würdest Deinen HTML und CSS Code soweit ausdünnen, dass das für das Problem erhebliche sichtbar bleibt. Auffüllen mit Textpassagen (und verändern der Hintergrundfarbe für die Sichtbarmachung) in den betreffenden Divs - und wir hätten ein Konstrukt, worüber man sinnieren kann, woran es liegt.

Mir geht es darum, herauszufinden, welches Div wo und wie steckt. Wenn nämlich jene Problemdivs in zB anderen Elternelementen stecken, dann wärs nicht verwunderlich, dass sich die z-indexes beissen.

(am ende fehlt noch ein </div> ;))

mfg chmee
 
Zuletzt bearbeitet:
Dein Tipp mit einer anderen <div> war richtig, Formular war noch in einer anderen eingeschlossen die Probleme gemacht hat :D
jetzt passt es! Danke ;)

ps: Wo fehlt noch ein </div>?
 
Ich hab das Beispiel mal in jsfiddle umgesetzt - http://jsfiddle.net/YB26s/4/

Das Elternelement beeinflusst natürlich auch Kindelemente.

Obwohl das div "drüber" einen z-index von 200 hat, liegt es unter dem content-element mit dem z-index 150, schlicht, weil die Elternelemente main und content das entscheiden. Unabhängig von relative und absolute. Ähnlich auch der Fall mit drunter, welches einen niedrigeren z-index als main hat, dennoch drüber liegt.

(Im gezeigten Text war ein </div> zu wenig, aber das kann an der Kürzung liegen. Ist ja jetzt eh unerheblich)

mfg chmee
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück