Hi,
folgendes Problem. Ich bastele gerade an einem kleinen Projekt, dessen Layout eine (ziemlich kindisch-bunt dargestellte) Unterwasserwelt ist. Nun kam mir eine schöne Idee, deren Umsetzung sich allerdings nicht ganz einfach gestaltet.
Und zwar gibt es in eben dieser Unterwasserwelt im Hintergrund kleine Luftbläßchen. Nun würde es natürlich einen schönen Effekt ergeben, wenn ich einige dieser Blasen (als halb transüparente PNGs) auch vor den Inhalt packen könnte. Für den IE würde ich, mangels Transparenzunterstützung, selbige natürlich ausblenden. Die Blasen sollten nach Möglichkeit mit der Seite mitscrollen und nicht "fixed" sein.
Mein naiver Ansatz war: Ich nehme einen Layer über die ganze breite und Höhe der Seite und gebe diesem einen Recht hohen z-index. Dieser Layer enthält als Hintergrund die "Blasengrafik". Dann setze ich per CSS den z-index von Schriften und Links noch höher, damit diese trotzdem markier- bzw. anklickbar sind.
Andere Elemente der Seite bekommen keinen hohen z-index, so dass die transparenten Blasen vor diesen Elementen sind und so einen ganz hübschen effekt ergeben.
Soweit die Theorie. In der Praxis stellt mich dies aber vor einige Probleme:
0.) Ist dieser naive Ansatz überhaupt sinnvoll? Wenn nein, gibt es einen sinnvolleren Ansatz oder kann ich die Idee gleich vergessen.
1.) Wie bekomme ich einen Layer auf die volle Seiten höhe ohne die Layer zu schachteln? Wenn ich einfach den Inhaltslayer in den Blasenlayer packe, damit dieser den Blasenlayer auf die volle Höhe zieht, so erhält der Inhaltslayer auch automatisch einen höheren z-index.
2.) Wie bekomme ich für alle Schriften und Links einen hohen z-index ohne sie aus dem restlichen Inhaltselementfluß rauslösen zu müssen?
Viele Grüße
Marc