Div Container übereinander legen

Wenn man einen Div-Container über ein anderes Div-Element legen möchte, muss man dem umschließendem Eltern-Element das Attribut position: relative; zuweisen und den darin befindlichen Div-Containern die Eigenschaft position: absolute; geben. Dadurch liegt dann das Kinder-Div, welches zuletzt im Code definiert wurde, am Obersten. In meinem Beispiel liegt child_2 also über child_1:
HTML

1
2
3
4

    <div id="parent">
      <div id="child_1"></div>
      <div id="child_2"></div>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#parent
{
  position: relative;
}
 
#child_1, #child_2
{
  width: 200px;
  height: 200px;
  position: absolute;
}
 
#child_1
{
  background-color: red;
}
 
#child_2
{
  background-color: green;
}

Möchte man die Reihenfolge der Überlappung selbst bestimmen, so muss man den z-index einsetzen. Ein Element mit höherem z-index liegt über Elementen mit niedrigerem z-index. Mit folgender CSS-Code-Änderung würde child_1 über child_2 liegen:

1
2
3
4
5
6
7
8
9
10
11

#child_1
{
  background-color: red;
  z-index: 2;
}
 
#child_2
{
  background-color: green;
  z-index: 1;
}

In meinen Tests hatte der z-index nur Auswirkungen auf Elemente, die position: absolute; definiert hatten.

9 Gedanken zu „Div Container übereinander legen“

  2. Hey Benny, das mit den zwei Div’s übereinander habe jetzt so hinbekommen. Aber meine folgenden 3 Spalten rutschen nach oben. Kannst du mir bitte helfen. Ich lade die Datei mal hoch. Die Seite hat einen Sticky Footer und die übereinander gelegten divs skalieren den Inhalt proportional. Schon jetzt – dankeschön! LG Ina

    http://yourwebsiteonline.de/div_index.html

  5. Hi Benny,

    das, was Du da beschrieben hast, habe ich schon öfter gemacht, aber manchmal werde ich betriebsblind und dann suche ich doch mal so eine Anleitung.

    Ich meine wirklich so eine Anleitung, die ist kurz, bündig, übersichtlich dargestellt und hat mir gerade viel Zeit beim Suchen nach meinem Fehler erspart.

    Vielen Dank und lG
    Manni

  6. Macht für ein responsives layouten, also der heutigen Zeit entsprechend, gar keinen Sinn.

    „!important“ und „position: absolute“ sind die Staatsfeinde Nummer #1

    Für mich leider nicht zu gebrauchen.

  8. vielen Dank für die kurz, übersichtliche und einfach Erklärung. Hat mir sehr geholfen und ist auch super verständlich für HTML-Anfänger. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.