✔ z-index: Problem mit Grafik hinter Contentbereich

Status
Nicht offen für weitere Antworten.
S

shorty

Erfahrenes Mitglied
Guten Tag,

ich arbeite zurzeit an einem Entwurf für eine neue Homepage und habe vor, eine Grafik mit Hilfe von "z-index" in den Hintergrund zu setzen. Dazu habe ich mir überlegt, einen div-Layer mit einem "z-index" von "6" um den Contentbereich zu legen und ebenfalls einen div-Layer mit dem "z-index" von "1" um die Grafik zu legen, die hinter dem Contentbereich angezeigt werden soll. Firefox hat aber scheinbar ein Problem mit dieser Lösung. Ich weiß nun leider nicht mehr weiter, wie man das Problem beheben kann.

Hat jemand von euch vielleicht eine Idee?

Ich habe zum besseren Verständnis eine Grafik angehängt:
Die Grafik, die hinter dem Contentbereich und hinter dem "Copyright" angezeigt werden soll, ist praktisch die transparente "Mauer" mit dem weißen Kreis. Ebenfalls habe ich zum Debuggen einen Border um alle div-Layer gesetzt.

Die Wahl des "z-index" von "6" kommt daher zu stande, weil das Menü ebenfalls überlappt dargestellt werden soll und ich dafür schon die Werte von "2-5" verwendet habe.

Die zurzeit verwendeten CSS-Eigenschaft sind:

Code: 
#main
{
	z-index: 6;
	border: 1px #000 solid;
}
[...]
#bg_bottom
{
	position: absolute;
	
	left: 20%;
	top: 60%;
	
	width: 762px;
	height: 323px;
	
	z-index: 1;
	
	border: 1px #000 solid;
}

Der HTML-Code mit den Div-Layer für die "wichtigen" Bereich lautet:

HTML: 
[...]
<div id="main">
[...] // Der Contentbereich (der weiße Bereich mit "Bild der Woche", "Latest" und "Event Reviews")
</div>
[...]
<div id="bg_bottom"><img src="./images/bg_bottom.png" width="764" height="324"></div>
[...]

Ich danke euch schonmal im Voraus für die Hilfe
 
Zuletzt bearbeitet:
Hallo,

warum ich die Grafik nicht als Hintergrund gesetzt habe, frage ich mich auch gerade :).
Was hätte es für einen Effekt?

Habe die Positionierung eingefügt und jetzt wird die Überlappung dargestellt, jedoch müsste ich noch einen Bezug zwischen den beiden div-Layern herstellen, denn wenn der Contentbereich durch großen Inhalt wächst, müsste die Grafik (also die "Mauer") mit wandern.

Hättest du dazu noch einen Lösungsvorschlag?

Bedanke mich recht herzlich für für den Tipp.
 
Zuletzt bearbeitet:
Wenn du die Grafik nicht als Hintergrundbild verwenden willst bzw. es die Seitenverhältnisse nicht zulassen, sieht es schlecht aus, um einen Bezug zwischen den zwei übereinanderliegenden Ebenen herzustellen, damit die Grafik in der unteren Ebene bei zunehmenden Inhalt in der oberen Ebene mitwandert.
 
Ich habe deinen Vorschlag, die Grafik als Hintergrund zu verwenden befolgt, allerdings wandert sie bei zunehmendem Inhalt nicht mit.
 
Ist die Hintergrundgrafik auch am unteren Elementrand positioniert?

Code: 
background: url(./images/bg_bottom.png) 0 100% no-repeat; /* 0 = Hintergrundposition von links, 100% = Hintergrundposition von oben */
Denn dann wandert sie automatisch nach unten, wenn der Inhalt in dem Element zunimmt.
 
Dann zeig doch bitte mal den vollständigen Quellcode (HTML + CSS) der Seite, oder nenne einen Link zur Seite, damit man da einen Blick drauf werfen kann.
 
Wie gesagt, wenn Du in der unteren Ebene die Hintergrundgrafik einsetzt, hat sie keinerlei Bezug zur darüberliegenden Ebene, und reagiert daher nicht auf den zunehmenden Inhalt.

Von daher würde ich das Hintergrundbild, wie schon von mir empfohlen, im DIV #main am unteren Elementrand positionieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück