8. Elemente auf der Webseite positionieren

Ein weiterer, designtechnisch sehr nützlicher Vorteil von CSS ist, dass man Elemente frei auf der Webseite positionieren kann. Und das ist dabei noch nicht einmal schwer.

Dabei kann man entweder eine absolute oder eine relative Positionierung wählen. Der Unterschied zwischen den beiden Möglichkeiten ist folgender:
Die relative Positionierung wird von der eigentlichen Stelle des Elementes aus berechnet, an dem es auf die Seite gesetzt wurde. Das heißt, wenn Sie beispielsweise ein Bild links oben in die Ecke setzen und dann die Position des Bildes relativ bestimmen, bewegen Sie dieses Bild von seiner ursprünglichen Koordinate aus nach oben, unten, links oder rechts. Dabei wird ein kleiner Freiraum hinterlassen. Die Positionierung orientiert sich an der ursprünglichen Position des Elementes.
Bei der absoluten Positionierung würde das Bild quasi „auf die Seite drauf geworfen“. Sie können es frei positionieren, ohne dass dabei eine Lücke hinterlassen wird. Die Positionierung orientiert sich also am Browserfenster. In beiden Versionen können dabei andere Webseiten-Elemente überlagert werden.

8.1 Absolute und relative Positionierung

Beispiel absolute Positionierung:

#bsp1 {
        position: absolute;
        top: 50px;
        left: 50px;
      }

#bsp2 {
        position: absolute;
        top: 50px;
        right: 50px;
      }

#bsp3 {
        position: absolute;
        bottom: 50px;
        left: 50px;
      }

#bsp4 {
        position: absolute;
        bottom: 50px;
        right: 50px;
      }

Unsere HTML-Datei könnte dann wie folgt aussehen:

Beispiel:

<div id="bsp1"><p>Hallo von links oben</p></div>
<div id="bsp2"><p>Hallo von rechts oben</p></div>
<div id="bsp3"><p>Hallo links unten</p></div>
<div id="bsp4"><p>Hallo von rechts unten</p></div>

Erläuterung:
Wenn wir dieses Beispiel so in unsere Webseite kopieren, erscheint in jeder Ecke der Webseite – und zwar mit einem Abstand von 50 Pixeln zum jeweiligen Rand – der im Beispiel genannte Text. Dieser Text überlagert dabei auch schon eventuell bereits vorhandene Elemente.

Beispiel relative Positionierung:

#bsp1 {
        position: relative;
        top: 50px;
        left: 50px;
      }

#bsp2 {
        position: relative;
        top: 50px;
        right: 50px;
      }

#bsp3 {
        position: relative;
        bottom: 50px;
        left: 50px;
      }

#bsp4 {
        position: relative;
        bottom: 50px;
        right: 50px;
      }

Erläuterung:
Benutzen wir nun eine relative Positionierung der Elemente, so würde sich, wenn wir das Beispiel von vorhin nehmen, der genannte Text um die angegebenen Werte von seiner ursprünglichen Position entfernen und dabei eine Lücke hinterlassen.
Nehmen wir also an, der Text wäre Teil eines längeren Abschnittes. Verwenden wir nun dieses Beispiel, wird dabei der Text aus dem Beispiel vorhin aus dem Abschnitt „herausgeschnitten“ und an die entsprechende andere Position wieder „drauf geschmissen“ – berechnet von seiner ursprünglichen Position aus.

8.2 Ebenen definieren

Mit CSS kann man sogar in die dritte Dimension arbeiten: Die Tiefe. CSS beherrscht eine Ebenen-Funktion mit der sich die verschiedenen Elemente einer Webseite überlappen lassen können. Dabei ist es völlig egal, ob es sich um ein Bild, einen Text, eine Tabelle oder sonst irgendwas handelt.

Beispiel:

#ebene1 {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}

#ebene2 {
  position: absolute;
  left: 150px;
  top: 150px;
  z-index: 2;
}

#ebene3 {
  position: absolute;
  left: 200px;
  top: 200px;
  z-index: 3;
}

Unsere HTML-Datei sieht wie folgt aus:

Beispiel:

<div id="ebene1"><img src="04.jpg"></div>
<div id="ebene2"><img src="04.jpg"></div>
<div id="ebene3"><img src="04.jpg"></div>

Erläuterung:
Das Bild „04.jpg“ wird in diesem Beispiel dreimal überlappt – mit jeweils 50px Abstand mehr zur vorigen Ebene. Dabei zu beachten wäre, dass die Ebene mit dem höheren z-index-wert die Ebene mit dem niedrigeren z-index-wert überlappt.