Der Dokumentenfluss

Die Positionierung ist eines der wichtigsten Themengebiete von CSS, denn damit können wir aufs genauste bestimmen, wo welches Element auf der Webseite platziert werden soll. Wenn wir ein Element im HTML-DOM einbinden, befindet sich dieses im Dokumentenfluss. In der Regel werden Blockelemente im Dokumentenfluss mit einem Zeilenumbruch, also untereinander angezeigt und alle Inlineelemente im Textfluss, d.h. nebeneinander, bis der Platz nicht mehr ausreicht. Inline-Blockelemente verhalten sich wie Inlineelemente und werden ebenfalls nebeneinander angezeigt, bis der Platz im Element oder auf dem Bildschirm nicht mehr ausreicht. Dann wird das Element in der nächsten Zeile angezeigt.

Elemente positionieren

Wollen wir ein Element gezielt positionieren, benötigen wir die Eigenschaft position. Diese nimmt die folgenden Werte an:

  • static
  • relative
  • absolute
  • fixed

Weisen wir einem Element eine dieser Eigenschaftswerte zu, können wir dieses gezielt mit den weiteren Eigenschaften

  • top
  • right
  • bottom
  • left

positionieren. Wollen wir ein Element 10px vom rechten Rand aus anzeigen, müssen wir also zusätzlich die Eigenschaft right:10px benutzen.

static

Der Standardwert für die Eigenschaft position, den ein Element hat, ist static. Folglich befindet sich ein statisch positioniertes Element im Dokumentenfluss und wird von dem Browser standardmäßig, ohne weitere Abweichungen angezeigt. Die zusätzlichen Eigenschaften für die Positionierung top, right, bottom, left sind in Verbindung mit static unwirksam. Aus diesem Grund wird einem Element höchstens aus Zwecken der Übersicht die Eigenschaft position:static; zugewiesen.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine Überschrift mit statischer Position</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
h1 { position: static; left: 30px; bottom: 10px; }

relative

Relativ positionierte Elemente befinden sich im Dokumentenfluss, d.h. sie werden wie oben beschrieben standardmäßig vom Browser platziert. Mit der Eigenschaft position: relative; ändert sich jedoch eine entscheidende Gegebenheit: Wir können das Element mithilfe der weiteren vier Eigenschaften left, right, top und bottom von seiner ursprünglichen Platzierung verschieben.

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine Überschrift mit relativer Position</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
h1 { position: relative; left: 30px; bottom: 10px; }

absolute

Mit dem Schlüsselwort absolute platzierte Elemente werden komplett aus dem Dokumentenfluss herausgenommen und "schweben" quasi darüber. Dieses Verhalten kann man bereits ohne die Eigenschaften left, right, top und bottom erkennen:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine Überschrift mit absoluter Position</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
h1 { position: absolute; }

Im obigen Beispiel überlagert sich die Überschrift mit dem Paragrafen. Des Weiteren können wir natürlich auch hier das Element von seinem Ursprung aus bewegen:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine Überschrift mit statischer Position</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
h1 { position: absolute; left: 30px; bottom: 10px; }

Eine weitere Besonderheit sollte in diesem Zusammenhang noch erwähnt werden: Wenn ein Element mit position:absolute in einem Elternelement mit position:relative steht, so wird dieses lediglich innerhalb des Elternelements von seinem Dokumentenfluss gelöst. Die Angaben left, right, top und bottom beziehen sich nun nicht länger zum Browserfenster, sondern zum Elternelement:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <div id="ElternElement"> <h1>Eine Überschrift mi statischer Position</h1> </div> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
#ElternElement { position: relative; height: 100px; } h1 { position: absolute; left: 30px; bottom: 10px; }

Im obigen Beispiel wird die Überschrift <h1></h1> zwar 10px vom unteren Rahmen aus angezeigt, allerdings nicht vom Browserfenster, sondern vom Elternelement aus.

fixed

Ein fixes Element wird aus dem Dokumentenfluss entnommen und richtet sich starr am Viewport aus, d.h. beim Scrollen der Webseite bleibt es an Ort und Stelle. Dafür kommen gerne Sidebars, sowie Header oder Footer in Frage:

  • Html
  • Css
  • Ergebnis
<!DOCTYPE html> <html> <head></head> <body> <h1>Eine Überschrift mit fixer Position</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </body> </html>
h1 { position: fixed; left: 30px; bottom: 10px; }

Im obigen Beispiel wird die Überschrift trotz scrollens 10px vom unteren Rand entfernt angezeigt.

Stapelung

Der Browser stapelt in der Regel Elemente von ganz allein. Dabei arbeitet er chronologisch den Elementenbaum ab. Hat ein absolutes Element keine explizite Angabe zur Stapelung, weist er diesem automatisch den Wert z-index:0; zu. Gibt es nun ein weiteres absolutes Element, wird zunächst geguckt, auf welcher Ebene sich dieses befindet. Wenn dieses nach dem vorherigen Element im HTML-DOM auftritt, bekommt dieses einen höheren z-index und wird folglich über diesem angezeigt:

  • Html
  • Ergebnis
<div style="position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background: red;"> </div> <div style="position: absolute; width: 300px; height: 100px; background: blue;"> </div>

Wenn wir den Wert selber bestimmen, können wir dem Browser mitteilen, welches Element er an oberster Stelle anzuzeigen hat:

  • Html
  • Ergebnis
<div style="z-index: 1; position: absolute; top: 50px; left: 50px; width: 300px; height: 100px; background: red;"> </div> <div style="z-index: 0; position: absolute; width: 300px; height: 100px; background: blue;"> </div>

Im obigen Beispiel hat das erste absolute Element den höheren z-index und wird deshalb über dem zweiten absoluten Element angezeigt.