Zurück: Ausrichtung von Elementen
Weiter: Breiten und Höhen

Positionierung von Elementen

position

Mit der Eigenschaft position können Sie Elemente auf der Webseite positionieren. Es werden folgende Positionierungsarten unterschieden:

static
Bei der Box handelt es sich um eine normale Box gemäß dem gewöhnlichen Fluss. static ist der Initialwert der Eigenschaft position, das bedeutet, dass jede Box, für die Sie keine andere Positionierungsart definieren, statisch positioniert ist.
relative
Die Box wird relativ zu ihrer statischen Position verschoben. Ein Element div zum Beispiel, das mit 
div {
   position: relative;
   top: 3em;
   left: 2em;
}
positioniert wurde, wird 3em weiter unten und 2em weiter rechts positioniert. Die dem positionierten Element nachfolgenden Elemente werden so berechnet, als ob das Element nicht positioniert wurde. In dem Beispiel würde es also vermutlich zu Überlappungen kommen.
absolute
Die Box wird relativ zu ihrem umschließenden Block verschoben. Dabei gilt folgendes zu beachten: Der umschließende Block für eine absolut positionierte Box wird durch das nächste positionierte Elternelement oder, falls es kein solches gibt, durch den umschließenden Ausgangsblock (also den Viewport) gebildet. Ein durch die Regel 
img {
   position: absolute;
   top: 10px;
   right: 10px;
}
positioniertes Bild wird also mit 10px Abstand nach oben und rechts von der oberen rechten Ecke des Elternelementes aus positioniert. Der Block wird dabei aus dem gewöhnlichen Elementfluss herausgenommen, er hat also keinerlei Einfluss auf die Darstellung der nachfolgenden Elemente. Dadurch kann es natürlich sehr leicht zu Überlappungen kommen, die es häufig zu vermeiden gilt.
fixed
Die Box wird absolut positioniert, darüber hinaus ist die Box feststehend hinsichtlich einer bestimmten Referenz. Auf dem Screen bedeutet das, die Box bleibt beim Scrollen der Seite stehen, beim Druck wird das Element auf jeder Seite an der gleichen Stelle wiederholt.
inherit

Man bezeichnet ein Element als positioniert, wenn dessen Eigenschaft position einen anderen Wert als static annimmt.

top, right, bottom und left

Um die genaue Position eines Elementes angeben zu können, gibt es die Eigenschaften top, right, bottom und left, die die Abstände zum enthaltenden Block angeben, wie Sie in den Beispielen bereits gesehen haben.

auto
<Länge>
<Prozent>
inherit
  • Selbstverständlich dürfen Sie auch negative Werte angeben. Das kann zu interessanten Effekten führen.
z-index

Die Position jeder Box wird nicht nur horizontal und vertikal, sondern auch in Richtung der z-Achse bestimmt. Das sehen Sie daran, dass Elemente sich in der Reihenfolge, wie sie im XHTML-Quelltext vorkommen, überlappen. Mit der Eigenschaft z-index bestimmen Sie, wie die Elemente übereinander liegen. Dabei überdeckt ein Element mit einem höherem Z-Index eines mit einem niedrigeren. Elemente, für die kein Z-Index festgelegt wurde, haben den Z-Index 0.

auto
<Integer>
inherit

Im folgenden Beispiel sollte das Element mit der ID yellow das Element mit der ID green überlappen, da es im Quelltext als zweites steht. Die Deklaration z-index: 1 hebt die grüne Box jedoch in eine höhere Ebene.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
   <title>Die Eigenschaft 'z-index'</title>

<style type="text/css">
div {
   position: absolute;
   padding: 10px 70px 100px;
}
#green {
   top: 100px;
   left: 100px;
   color: black;
   background-color: green;
   z-index: 1;
}
#yellow {
   top: 50px;
   left: 50px;
   color: black;
   background-color: yellow;
}
</style>
</head>

<body>

<div id="green">oben</div>
<div id="yellow">unten</div>

</body>
</html>

Beispieldokument ansehen

Zurück: Ausrichtung von Elementen
Weiter: Breiten und Höhen
Zum Seitenanfang