z-index, Grafiken teilweise hinter Header mit fe_page

[gagamike]

Hi,

ich möchte gerne ein paar Wolken und andere Grafiken im Hintergrund meines Designs anordnen. Vimeo.com als Beispiel. Bei mir soll aber alles fix positioniert sein.

Ich habe das Design auf fe_page aufgebaut, damit ich bei updates möglichst keine Arbeit habe.

Ich habe einen eigenen Layout-Bereich names designobjects angelegt, der vor dem footer ausgegeben wird. Darin sind leere divs mit den Grafiken als Background. Für Barrierefreiheit ist das besser als img oder? So ist es als Design ausgezeichnet und nicht als Inhalt.

Einen eigenen Layoutbereich habe ich da ich den wrapper als für die Positionierung relevanten Bereich möchte. Dazu muss ich aber alles was sich in im DOM zwischen der Wolke und dem Wrapper befindet als static definieren. Aber für static kann ich keinen z-index definieren. Deshalb kann ich die Wolken nicht im Header oder im footer reinschreiben. (Ich hoffe das versteht man so...)

</div>

<div class="custom">

<div id="designobjects">
<div class="inside">

<div id="wolke1"></div>
<div id="wolke2"></div>
</div>
</div>

</div>

<div id="footer">

Damit ich diese divs frei positionieren kann habe ich
div.custom, designobjects, designobjects div.inside als static. So ist wrapper das nächste element mit position:relative und Verschiebungen beziehen sich darauf.

Das div.custom habe ich über die ganze Seite ausgedehnt (wie den wrapper). Die Positionierung funktioniert so bestens.

#wrapper div.custom{bottom:0px;left:0px;right:0px;top:0px;position:absolute;z-index:10;}
#designobjects{position:static;}
#designobjects div.inside{}
#wolke1{width:400px;height:179px;left:10px;top:100px;position:absolute;background-image:url("tl_files/tpl/wolke1.png");}

und für den header habe ich

#header{height:328px;background-image:url("tl_files/tpl/header.jpg");background-repeat:no-repeat;z-index:100;}

Problem ist jetzt aber, dass trotz z-index:100 für header und z-index:10 für die "Grafikschicht" die Grafiken über dem Header angezeigt werden. Ich möchte sie aber drunter, damit sie sich je nach Bildschirmbreite verschieden stark darunterschieben. (Ansicht im Anhang)

Ich habe im Anhang den Objektbaum. #header und div.custom sind auf gleicher Stuffe also müsste das doch gehen.

Was mache ich falsch?

[gagamike]

Link

Habe gerade in einen Beitrag von Nina gelesen, dass es erwünscht ist, dass man einen Link postet, wenn man Designprobleme hat. Gerne.

[link gelöscht]

sorry, für die umständliche Schreibweise aber möchte nicht in den Suchmaschinen auftauchen bevor die Seite fertig ist.

Irgendwie verdeckt div.custom alles, man kann nichts mehr anklicken... ist mir nicht klar.

Wäre wirklich froh, wenn jemand einen Tipp für mich hätte.

[Nina]

Gib mal unbedingt dem individuellen Inhaltsrahmen eine andere Klasse als "custom", da die Klasse "custom" in Contao schon vorbelegt ist!

[gagamike]

"custom" wird da automatisch eingesetzt, da ich "designobjects" als eigenen Layoutbereich definiert habe. "custom" habe ich nicht selbst gewählt.

Ich weiss nicht ob es angebracht ist einen eigenen Layoutbereich zu erstellen aber es schien mir die einzige Lösung.

Oder verstehe ich dich gerade falsch?

[kos]

Hallo,

versuche mal folgendes im css:

#wrapper{.... position:relative;z-index=1;}
/* bei div.custom reicht:*/
div.custom{left:0;top:0;position:absolute}
#wolke1{... z-index=-1}

[gagamike]

Es funktioniert! Aber wie?

Erst mal vielen Dank Klaus! Ich verstehe zwar nichts mehr aber es funktioniert!

Ich habe deinen Vorschlag etwas angepasst.

#wrapper{position:relative;z-index:1;}
/* div.custom ohne Definitionen - vielleicht kommen ja noch mehr eigenen Bereiche */
#designobjects{bottom:0;left:0;right:0;top:0;position:absolute;z-index:-1}
/* designobjects div.inside ohne Definitionen */
#wolke1{width:400px;height:179px;left:10px;top:100px;position:absolute;background-image:....;}
#wolke2{width:400px;height:179px;right:30px;top:300px;position:absolute;background-image:....;}

- so muss kann ich die Wolken vom rechten und vom linken Rand aus positionieren
- ich muss nicht jeder Wolke z-index:-1 zuweisen, sondern nur dem div #designobjects

Aber wie das ganze funktioniert verstehe ich nicht...
Ich habe versucht irgendwie dahinter zu kommen aber ist wohl mit den Grundsätzen zum z-index von Selfhtml nicht zu verstehen. -1 scheint eine besondere Bedeutung zu haben?

#wrapper:1 -> Bezugselement?
#irgendwas: -1 -> dem Bezugselement am nächsten?

Das Verhalten ist nämlich gleich, egal ob ich div.custom oder #designobjects die -1 als z-index zuweise obschon #designobjects ja nicht im gleichen Kontext steht die div.custom. Angeblich stehen Kinder immer im Kontext der Eltern, das heisst kein Kind kann hinter seinem Elternelement stehen. (Selfhtml)

Kannst du da etwas Licht ins Dunkel bringen?