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> |
<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;
} |
#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;
} |
#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.