Div auf Div mit Verwendung von z-Index

Question

Ich habe die folgenden Divs in meinem HTML:

Die sich direkt innerhalb meines Body-Tags befinden.

Mit dem folgenden CSS:

body {
    margin: 0;
    padding: 20px 0;
}
.content {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.content {
    position: relative;
    z-index: 1;
    border: #000 thin solid;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}
.bgimage {
    position: absolute;
    z-index: -1;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(bg1.jpg);
}

Grundsätzlich habe ich ein Div, das ein Hintergrundbild darstellt, und ich werde ein weiteres Div darüber mit Transparenz haben. Dieser aktuelle Code funktioniert, aber mein Problem tritt auf, wenn ich versuche, das content-Div von oben nach unten zu verschieben.

Wenn ich beispielsweise margin-top:100px hinzufüge, verschiebt es auch das Bild nach unten. Ich dachte, es sollte es nicht berühren, wenn es nicht auf demselben z-Index ist? Warum zwingt das Hinzufügen eines Randes das bgimage-Div auch nach unten?

I habe auch versucht, das Div mit der Klasse "content" als position:absolute und z-index zu definieren, dann wird es aber nicht zentriert. Wie sollte ich das lösen?

Answer 1

Ihr CSS sollte sein

.bgimage { position: relative; }

.content { position: absolute; }

damit sich der .content relativ zum .bgimage positioniert Ihr aktuelles CSS lässt das .bgimage relativ zum Dokument positionieren.

sehen Sie sich diesen Link zur CSS-Positionierung an

Answer 2

z-index hat keine Beziehung zur Positionierung: Es beeinflusst nur die Reihenfolge der Darstellung Ihrer Elemente. Position: relative sagt dem Browser, das Element an der richtigen Stelle zu rendern und es gegebenenfalls um left, right, top oder bottom Koordinaten zu verschieben. Daher wirken sich Randabstände, Padding usw. immer noch darauf aus.

Nur position: absolute garantiert eine unabhängige Position.

Answer 3

Ich sehe überhaupt keine Notwendigkeit für "z-index" oder "position: absolute" in Ihrem Code - es sei denn, Sie haben uns andere Komplikationen verschwiegen.

Um den Hintergrund in der DIV-Klasse "main" zu zentrieren:

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

Das "center top" platziert das Zentrum-Oben des Hintergrundbildes auf dem Zentrum-Oben des Elements, auf das es angewendet wird. Möglicherweise möchten Sie ein

min-width:1024px;_width:1024px;

auf dasselbe Element anwenden - um zu verhindern, dass ein schmaleres Fenster die Ränder verdeckt (dies ändert, wie das Element gerendert wird, wenn der "Viewport" schmaler ist als die Dimensionen des Hintergrunds).

Das Einzige, was Ihr vorab modifizierter Code tun kann, was mein modifizierter Code nicht kann:

• Das Hintergrundbild zuschneiden (wenn es nicht standardmäßig 1024px x 768px ist) durch Verwendung der CSS "width" und "height" Eigenschaften
• Wenn das Element class="main" bereits ein Hintergrundbild hat, unterstützen die meisten Browser nicht das für CSS3 erforderliche Stapeln mehrerer Hintergründe auf demselben Element

Einige der Aussagen über "z-index" und die "position" Eigenschaften oben waren korrekt, erwähnten jedoch nicht: Sie haben Ihr Element class="content" "aus dem Fluss" genommen. Die Vorgängerelemente wachsen nicht, wenn der Inhalt des Elements class="content" wächst. Dies ist ein wichtiger und grundlegender Unterschied zwischen "z-index"ed Elementen und Elementen, die "im Fluss" bleiben.

Weitere Randnotizen:

• Elemente mit demselben z-Index werden gemäß ihrer Reihenfolge im HTML gestapelt (später im HTML bedeutet, dass sie oben auf dem Bildschirm gezeichnet werden)
• "Z-Indexing" erfordert "position: (absolut|relativ)", "z-index: (gültiger Wert)", und glaube mich zu erinnern "(top|left|bottom|right): (gültiger Wert)" um das Element "aus dem Fluss" zu nehmen

Answer 4

CSS absolute positioning wird immer "relativ" zum zuletzt übergeordneten Element durchgeführt, das eine "position: relative" hat, sonst wird standardmäßig der body-Tag verwendet. Wenn der CSS, den Sie eingefügt haben, alles ist, was diese divs betrifft, wird Ihre .content div relativ zur .main div positioniert, aber Ihre .bgImage wird basierend auf dem

Wenn Sie möchten, dass sowohl .content als auch .bgImage synchron bewegt werden, müssen Sie ein "position: relative" zu div.main hinzufügen.