Div überlagern

sapta · 30.07.2013

Hi,

ich möchte zwei Divs überlagern, ohne dabei die Größe zu kennen.
Ich habe ein Beispiel:

Code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    body,html{
        color:#fff;
        background:#000;
    }
        .container{
            clear:both;
            width:480px;
            margin:0 auto;
            background:yellow;    
        }
            .container .first{
                height:300px;
                width:100%;
                background:green;    
            }
            .container .second{
                height:    200px;
                width:100%;
                background:blue;
                /* Nur zur Demo */
                z-index:2;
                position:relative;
                margin-top:-300px;
            }
    </style>
</head>
<body>

dfklögjdfjhfg fgmjhfg mfg fgmhhpl gh fgjhp sd fghd+ fgbü sdfg fnbdfhkpsdg fgflgsdgjh

<div class="container">
    <div class="first">
    </div>
    
    <div class="second">
    </div>
</div>


</body>
</html>

div.second überlappt im Beispiel .first. Das geht jedoch nur, da ich margin-top:-300px (also die Höhe von .first) genommen habe. Ich möchte jedoch, dass ich das Gleiche erreiche, auch wenn ich die Höhe von .first nicht kenne (variabler Content).
Der Div mit der Klasse .second soll also .first überlappen unabhängig von margin-top Angaben. Wenn ich mit position:absolute arbeite haut es mir den Div jedoch aus dem Container..

Any solutions?

leveler · 30.07.2013

AW: Div überlagern

ich möchte zwei Divs überlagern, ohne dabei die Größe zu kennen.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

sapta · 30.07.2013

AW: Div überlagern

leveler schrieb:
http://www.w3schools.com/cssref/pr_pos_z-index.asp

Zitat aus meinem ersten Post:
"Wenn ich mit position:absolute arbeite haut es mir den Div jedoch aus dem Container.."

leveler · 30.07.2013

AW: Div überlagern

mag sein, dass ich falsch liege, aber meines Wissens nach ist der z-index nicht allein auf absolute Postionierung abonniert......falls doch: Asche auf mein Haupt

schnullerbacke · 30.07.2013

AW: Div überlagern

Nicht sicher, ob ich genau verstanden habe, was du willst, aber
wenn du dem Div container ein position:relative gibts, dann kannst du die inneren auch absolut positionieren. Dann bleiben die da drin.

leveler schrieb:
mag sein, dass ich falsch liege, aber meines Wissens nach ist der z-index nicht allein auf absolute Postionierung abonniert

Nein, du liegst nicht falsch.

sapta · 31.07.2013

AW: Div überlagern

Momentan ändert das nichts:

Code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Unbenanntes Dokument</title>
    <style type="text/css">
    body,html{
        color:#fff;
        background:#000;
    }
        .container{
            clear:both;
            width:480px;
            margin:0 auto;
            background:yellow; 
            position:relative;   
        }
            .container .first{
                height:300px;
                width:100%;
                background:green;
            }
            .container .second{
                height:200px;
                width:100%;
                background:blue;
                /* Nur zur Demo */
                position:absolute;
            }
    </style>
</head>
<body>

dfklögjdfjhfg fgmjhfg mfg fgmhhpl gh fgjhp sd fghd+ fgbü sdfg fnbdfhkpsdg fgflgsdgjh

<div class="container">
    <div class="first">
    </div>
    
    <div class="second">
    </div>
</div>


</body>
</html>

Änder den Code doch mal bitte so ab, dass .second .first überlappt.

schnullerbacke · 31.07.2013

AW: Div überlagern

.container .second{

height:200px;
width:100%;
background:blue;
/* Nur zur Demo */
position:absolute;
top: 0;

}

Müsste schon reichen.

sapta · 31.07.2013

AW: Div überlagern

Tatsache. Ich habe bisher immer nur mit position:absolute; und top oder left gearbeitet, wenn ich etwas wirklich absolut über allem positionieren wollte. Das ich auch absolut innerhalb eines containers einsetzen kann, habe ich jetzt auch erst gelernt

Danke!

leveler · 31.07.2013

AW: Div überlagern

hmm, das clear: both sollte mMn nach auch nach den Positionierungs-Angaben stehen, da es sonst wieder "entwertet" wird.
Hinter die floatenden Elemente könnte man so etwas zB schreiben:

<br class="clearer">
css dazu:
.clearer{ height: 1px; overflow: hidden; clear: both;}

Wie immer gilt: alle Angaben ohne Gewähr

°°°°°°°edit: ok, bin zu spät. Ist also schon anders, ohne "dirty tricks" gelöst worden.....

tecben · 02.08.2013

AW: Div überlagern

schnullerbacke schrieb:
Nein, du liegst nicht falsch.

Das ist mir aber auch neu. Gibt es da irgendwas zum Nachlesen?