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.

Relative WordPress Links

Interne Links der eigenen Seite können sich häufig ändern, zum Beispiel wenn man die Domain wechselt oder die Permalink-Struktur von WordPress ändert. Besonders ärgerlich ist das, wenn man in den eigenen Artikeln auf andere Beiträge verlinkt und dann die alten Links nicht mehr gültig sind und man gezwungen ist, alle Verlinkungen manuell anzupassen.

Zum Glück gibt es dagegen ein Heilmittel. Den Code dazu findet man im Beitrag „Interne Links in WordPress-Beiträgen zukunftssicher setzen“ von Sergej Müller.