CSS: Problem mit z-index
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
attribut
browser
dank
dokument
element
filter
hilfe
hintergrund
index
inhalt
initial
jemand
position
positionierten elementen
problem
regel
schwierigkeit
standard
unreinheit
url
-
Hallo zusammen,
ich habe scheinbar ein Problem mit dem z-index.
Bei einem kleinen Experiment erscheint der Hintergrund einfach hinter dem eigentlichen Geschehen … wie kann man das lösen?
(Der Hintergrund wurde als gleichgroßer separater Container davor eingebunden, weil er einen blur-Filter enthält.)
funnyweb.12hp.de
Obwohl der Hintergrund einen z-index von 10, 11 bzw. 12 hat, erscheint er VOR dem Inhalt (z-index: mindestens 20) – woran liegt das und wie kann man das lösen?
Das Q-Logo erscheint korrekt ganz oben, es hat auch einen z-index von 40.
Danke für jede Hilfe
LG
Beitrag zuletzt geändert: 15.1.2016 21:19:58 von funnyweb -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich verstehe nicht wirklich, warum es so geht, aber setzt den z-index für den Hintergrund auf einen negativen Wert (und damit noch hinter die Standard-Ebene) und die Hintergrundfarbe von "html, body" auf transparent. So funktioniert es jedenfalls in Firefox, wenn ich die css-Werte über den Inspector ändere.
H.
Edit: PS: die längste Zeit habe ich dabei gebraucht, um mich in Dein Namensschema soweit einzulesen, das ich sinnvolle Änderungen versuchen konnte. Nicht gerade leserfreundlich ...
Beitrag zuletzt geändert: 15.1.2016 23:25:47 von hddg -
Das liegt daran, dass du die Elemente nicht alle positioniert hast. Klingt doof, ists auch.
Gibt #f2vc ein position:absolute oder auch position:relative, dann funktioniert alles, wie du willst.
Der z-Index funktioniert nur auf positionierten Elementen, also Elementen mit einem position Wert fixed, relative oder absolute. Wenn das Element keinen position-Wert hat, ist er initial auf static, und damit wirkt der z-Index nicht. #f2vc hat kein solches Attribut.
Liebe Grüße
Beitrag zuletzt geändert: 16.1.2016 0:23:32 von ggamee -
Vielen Dank !
ggamee schrieb:
Der z-Index funktioniert nur auf positionierten Elementen, also Elementen mit einem position Wert fixed, relative oder absolute. Wenn das Element keinen position-Wert hat, ist er initial auf static, und damit wirkt der z-Index nicht. #f2vc hat kein solches Attribut.
Damit ist dann auch klar, warum meine Lösung mit dem negativen z-Index funktioniert. Negative Indizes liegen unter der Standard-Ebene ...
H. -
hddg schrieb:
[…] die längste Zeit habe ich dabei gebraucht, um mich in Dein Namensschema soweit einzulesen, das ich sinnvolle Änderungen versuchen konnte. Nicht gerade leserfreundlich ...
Dafür möchte ich mich natürlich entschuldigen – vielen Dank für Deine Hilfe und Zeit!
ggamee schrieb:
Das liegt daran, dass du die Elemente nicht alle positioniert hast. Klingt doof, ists auch.
Wunderbar! Vielen Dank für Deine Hilfe!
Gibt #f2vc ein position:absolute oder auch position:relative, dann funktioniert alles, wie du willst.
Der z-Index funktioniert nur auf positionierten Elementen, also Elementen mit einem position Wert fixed, relative oder absolute. Wenn das Element keinen position-Wert hat, ist er initial auf static, und damit wirkt der z-Index nicht. #f2vc hat kein solches Attribut.
[…]
hddg schrieb:
[…]
Früher hatte es auch mal bei mir funktioniert, aber bevor ich dieses Stylesheet geschrieben habe, habe ich gelesen, dass es bei negativen Werten Kompatibilitätsprobleme geben könnte … aber nun funktioniert es ja auch ohne – danke nochmal, ggamee und hddg, für Eure Lösungen!
Damit ist dann auch klar, warum meine Lösung mit dem negativen z-Index funktioniert. Negative Indizes liegen unter der Standard-Ebene ...
[…]
EDIT: Jetzt verdeckt der Hintergrund (zumindest unter Firefox) die rechte Scrollbar. Lässt man den Blur-Filter weg, werden die Unreinheiten noch deutlicher. Hat dafür jemand eine Lösung/Erklärung?
Beitrag zuletzt geändert: 19.1.2016 21:04:33 von funnyweb -
funnyweb schrieb:
Jetzt verdeckt der Hintergrund (zumindest unter Firefox) die rechte Scrollbar. Lässt man den Blur-Filter weg, werden die Unreinheiten noch deutlicher. Hat dafür jemand eine Lösung/Erklärung?
Ein kurzes Google nach 'firefox position:fixed scrollbar' bringt (unter Anderem) http://forums.mozillazine.org/viewtopic.php?t=1365945. Durch Deine overflow-Regel ist das nicht ein Scrollbar des Fensters sondern des Dokuments. Und mit "position:fixed" und positivem z-index liegt Dein Hintergrund über dem Dokument und verdeckt den Scrollbar.
Lösungsansatz 1) Verzichte auf die overflow-Regel. Nachteil: Du kriegst einen horizontalen Scrollbar, da der vertikale Scrollbar ein paar Pixel von deinem Inhalt verdeckt ...
Lösungsansatz 2) Schon wieder der negative z-index für das Hintergrundelement ... Muss wohl mein persönliches Lieblingskonstrukt in CSS sein. Laut Mozilla Developers Network ist das nur für Browser, die CSS 2.1 nicht oder nicht vollständig umsetzen, ein Problem. Die letzten Browser, die damit Schwierigkeiten hatten waren IE<4, FF<1.9 ... ist also ein Problem der fernen Vergangenheit. -
hddg schrieb:
Wow! Danke für Deine Hilfe, ich muss unbedingt meine Google-Formulierungsfähigkeiten ausbauen. Ich habe mich für Lösung 2 entschieden, denn derart runzlige Browser gehören nach meiner Meinung nicht unterstützt.funnyweb schrieb:
Jetzt verdeckt der Hintergrund (zumindest unter Firefox) die rechte Scrollbar. Lässt man den Blur-Filter weg, werden die Unreinheiten noch deutlicher. Hat dafür jemand eine Lösung/Erklärung?
Ein kurzes Google nach 'firefox position:fixed scrollbar' bringt (unter Anderem) http://forums.mozillazine.org/viewtopic.php?t=1365945. Durch Deine overflow-Regel ist das nicht ein Scrollbar des Fensters sondern des Dokuments. Und mit "position:fixed" und positivem z-index liegt Dein Hintergrund über dem Dokument und verdeckt den Scrollbar.
Lösungsansatz 1) Verzichte auf die overflow-Regel. Nachteil: Du kriegst einen horizontalen Scrollbar, da der vertikale Scrollbar ein paar Pixel von deinem Inhalt verdeckt ...
Lösungsansatz 2) Schon wieder der negative z-index für das Hintergrundelement ... Muss wohl mein persönliches Lieblingskonstrukt in CSS sein. Laut Mozilla Developers Network ist das nur für Browser, die CSS 2.1 nicht oder nicht vollständig umsetzen, ein Problem. Die letzten Browser, die damit Schwierigkeiten hatten waren IE<4, FF<1.9 ... ist also ein Problem der fernen Vergangenheit. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
