http://jendryschik.de

UX, Usability und Webstandards

Suche
SucheMenü

Positionierung

Hinweis: Diese »Einführung in XHTML, CSS und Webdesign« ent­spricht der zwei­ten Auf­lage des gleich­na­mi­gen Buches, das im Dezem­ber 2008 im Ver­lag Addison-Wesley erschie­nen ist. Die Inhalte sind mittlerweile veraltet, fast alles hat sich weiterentwickelt. Seit einigen Jahren gibt es HTML5, von XHTML redet niemand mehr, und auch die Entwicklung und Unterstützung von CSS ist um Einiges weiter. Auch fast alle Grundlagentexte müsste man schon lange fortschreiben. Falls Sie die Texte dennoch lesen möchten, behalten Sie das bitte im Hinterkopf.

Zurück zur Startseite und zum Inhaltsverzeichnis des Buchs

Positionierung: Die Eigenschaft position

Die Eigenschaft position legt fest, auf welche Art und Weise die Position einer Box berechnet wird.

Werte static, relative, absolute, fixed, inherit
Initialwert static
Vererbung nein
Anwendung global

Die Werte der Eigenschaft position sind am einfachsten anhand von Beispielen zu erklären.

Statische Positionierung: static

Bei der Box handelt es sich um eine normale Box gemäß dem gewöhnlichen Fluss. static ist der Initialwert der Eigenschaft position, was bedeutet, dass jede Box, für die Sie keine andere Positionierungsart definieren, statisch positioniert ist.

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

Relative Positionierung: relative

Die Box wird relativ zu ihrer statischen Position verschoben.

Das positionierte div-Element in folgendem Beispiel wird im Verhältnis zu seiner gewöhnlichen Position 50 Pixel nach unten und 70 Pixel nach rechts positioniert. Die dem positionierten Element nachfolgenden Elemente werden so berechnet, als wäre das Element nicht positioniert worden. Daher kommt es in diesem Beispiel zu einer Überlappung beider Boxen.

<!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"lang="de"xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Relative Positionierung</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        width: 200px;
        height: 100px;
        padding: .5em;
        border: 2px solid black;
        color: black;
        background-color: #ffd
      }
      div#box1 {
        background-color: #ffb;
        position: relative;
        top: 50px;
        left: 70px;
      }
      /* ]]> */
    </style>
  </head>
  
  <body>
    <div id="box1">Box 1</div>
  
    <div id="box2">Box 2</div>
  </body>
</html>
Relative Positionierung


Abb. 7.23: Relativ positionierte Elemente können andere Elemente überlappen

Absolute Positionierung: absolute

Die Box wird relativ zu ihrem umschließenden Block verschoben. Dabei gilt es 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 äußersten umschließenden Block gebildet. Im Allgemeinen können Sie davon ausgehen, dass ein Element relativ zum Viewport, also zum Browserfenster, ausgerichtet wird, wenn kein positioniertes Vorfahrenelement gefunden wird.

Anhand von Listing 7.5 ist dies gut zu erkennen. Die dritte und die vierte Box sind absolut positioniert. Die dritte Box befindet sich innerhalb der relativ positionierten zweiten Box und wird daher relativ zu dieser ausgerichtet. Die vierte Box hat kein positioniertes Vorfahrenelement und wird daher relativ zum Viewport positioniert, also anhand der rechten unteren Ecke des Browserfensters.

<!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"lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Absolute Positionierung</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        width: 200px;
        height: 100px;
        padding: .5em;
        border: 2px solid black;
        color: black;
      }
      #box1 {
        background-color: #ffd;
        /* statisch positioniert */
      }
      #box2 {
        background-color: #ffb;
        /* relativ positioniert */
        position: relative;
        top: 50px;
        left: 50px;
      }
      #box3 {
        background-color: #ff6;
        /* absolut positioniert */
        position: absolute;
        top: 50px;
        left: 70px;
      }
      #box4 {
        background-color: #ff3;
        /* absolut positioniert */
        position: absolute;
        bottom: 25px;
        right: 25px;
      }
      /* ]]> */
    </style>
  </head>
  
  <body>
    <div id="box1">Box 1 (<code>static</code>)</div>
    <div id="box2">
      Box 2 (<code>relative</code>)
      <div id="box3">Box 3 (<code>absolute</code>)</div>
    </div>
    <div id="box4">Box 4 (<code>absolute</code>)</div>
  </body>
</html>
Absolute Positionierung


Abb. 7.24: Absolute Positionierung bietet viele Möglichkeiten

Absolut positionierte Elemente werden aus dem gewöhnlichen Elementfluss herausgenommen, deren Boxen haben also keinerlei Einfluss auf die Darstellung der nachfolgenden gleichrangigen Elemente; Überlappungen sind damit vorprogrammiert.

Feste Positionierung: fixed

Die Box wird absolut positioniert, also relativ zu ihrem umschließenden Block verschoben, und ist darüber hinaus feststehend hinsichtlich einer bestimmten Referenz. Auf dem Bildschirm bedeutet dies, dass die Box beim Scrollen der Seite stehen bleibt; beim Druck wird das Element auf jeder gedruckten Seite an der gleichen Stelle wiederholt.

In aktuellen Browsern wird die feste Positionierung mittlerweile sehr gut unterstützt, in alten Browsern jedoch nicht oder sehr fehlerhaft (siehe unten). Hier hilft ein schneller Griff in die CSS-Trickkiste: Webautoren können sich zunutze machen, dass Browser, die Probleme mit fester Positionierung haben, den Attributselektor nicht verstehen. Das Element mit der ID box1 wird zunächst absolut positioniert, würde aber mit dem Rest der Seite wegscrollen. Für alle Browser, die den Attributselektor korrekt interpretieren, überschreiben Sie position: absolute; mit position: fixed;. Nicht standardkonformen Browsern wird somit die Deklaration, die sie ohnehin nicht verstehen, vorenthalten, sodass sie das Element zumindest korrekt positionieren, während standardkonforme Browser das Element nun fest positionieren.

#box1 {
  position: absolute;
  top: 10px;
  right: 10px;
}
#box1[id] { position: fixed; }

Browserunterstützung

Die Eigenschaft position wird von allen modernen Browsern unterstützt mit folgenden Einschränkungen:

Internet Explorer 6
IE bis Version 6 erkennt den Wert fixed nur am Element body. An allen anderen Elementen angewendet, kann dieser Wert unvorhersehbare Auswirkungen haben.

Zum Seitenanfang

Boxabstände: Die Eigenschaften top, right, bottom und left

Die Eigenschaften top, right, bottom und left geben an, wie weit die obere beziehungsweise rechte, untere oder linke Kante einer Box von der entsprechenden Kante des umschließenden Blocks entfernt ist. Positive Werte zählen vom Rand des umschließenden Blocks nach innen, negative Werte zählen nach außen.

Werte auto, <Länge>, <Prozent>, inherit
Initialwert auto
Vererbung nein
Anwendung positionierte Elemente

Standardmäßig wird die Position der entsprechenden Kante automatisch berechnet (auto). Die Berechnung ist von mehreren anderen Angaben abhängig, die die vertikalen beziehungsweise horizontalen Abstände und Dimensionen betreffen:

  • Die Summe aus top, margin-top, border-top-width, padding-top, height, padding-bottom, border-bottom-width, margin-bottom und bottom muss gleich der Höhe des umgebenden Blocks sein.
  • Die Summe aus left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right und right muss gleich der Breite des umgebenden Blocks sein.

Wenn Sie eine Länge angeben, wird das positionierte Element exakt um den entsprechenden Wert verschoben.

Prozentwerte werden bei left und right

  • für absolut und fest positionierte Elemente relativ zur Breite des umschließenden Blocks und
  • für relativ positionierte Elemente relativ zur Breite des Elements selbst

berechnet. Für top und bottom gilt dies entsprechend relativ zur Höhe.

Browserunterstützung

Die Eigenschaften top, left, bottom und right werden von allen modernen Browsern unterstützt mit folgender Einschränkung:

Internet Explorer 6
Wird ein Prozentwert deklariert, verschiebt IE bis Version 6 die Box unter Umständen um einen Betrag, der größer ist als der aus den Abmessungen des umschließenden Blocks und des gegebenen Werts errechnete. Darüber hinaus wird der Wert inherit ignoriert.

Zum Seitenanfang

Angabe der Ebene: Die Eigenschaft z-index

In CSS hat jede Box drei Dimensionen, von denen im Rahmen dieser Einführung bislang nur zwei betrachtet wurden: die horizontale und die vertikale Position (x-Achse und y-Achse). Darüber hinaus liegen Boxen jedoch auch entlang einer z-Achse über- oder untereinander gestapelt. So wie transparente Folien auf einem Projektor Schicht für Schicht übereinandergelegt werden können, so können Elemente in verschiedenen Stapelebenen liegen und sich so gegenseitig überlappen oder überdecken. Wenn es weiter oben heißt, absolut positionierte Elemente würden aus dem Elementfluss herausgehoben, so bedeutet dies, sie stehen in einer höheren Stapelebene.

Jede Box in einem bestimmten Stapelkontext hat eine ganzzahlige Stapelebene, die ihre Position auf der z-Achse relativ zu anderen Boxen angibt. Boxen in einer höheren Stapelebene überlappen Boxen in einer niedrigeren Stapelebene. Boxen auf derselben Stapelebene werden von unten nach oben der Reihenfolge im Dokumentbaum entsprechend gestapelt.

Die Eigenschaft z-index gibt die Stapelebene positionierter Boxen im Stapelkontext an und ob die Box einen lokalen Stapelkontext einrichtet.

Werte auto, <Integer> ,inherit
Initialwert auto
Vererbung nein
Anwendung positionierte Elemente

Standardmäßig weist der Browser Elementen nach oben beschriebenen Regeln automatisch (auto) einen Wert zu. Wenn Sie ein <Integer> angeben, errechnet der Browser den aktuellen und den lokalen Stapelkontext neu.

  • Der aktuelle Stapelkontext, das heißt der Stapelkontext der Box, für die z-index angegeben ist, wird berechnet, wobei Elemente mit höherem z-index Elemente mit niedrigerem z-index überlappen. Negative Werte sind erlaubt.
  • Wenn nicht nur gleichrangige Elemente mit einem z-index versehen sind, sondern auch deren Nachkommenelemente, stehen diese in einem lokalen Stapelkontext. Zunächst werden also die gleichrangigen Elemente entsprechend ihrem z-index ausgerichtet und erst anschließend ihre Nachkommenelemente. Anders ausgedrückt: Wenn ein Element aufgrund seines z-index über seinem Nachbarelement dargestellt wird, werden auch alle seine Nachkommenelemente über den Nachkommenelementen des Nachbarelements dargestellt.

In Listing 7.6 sind Regeln für sechs div-Elemente definiert, an denen Sie deutlich das Prinzip des lokalen Schichtungskontexts erkennen können. Box A hat einen größeren z-index als Box B und überlappt diese und alle ihre Nachfahren daher. Zusätzlich stehen die Boxen 1 und 2 als Kinder der Box A ebenfalls vor Box B und allen ihren Kindern, auch wenn Box 1 einen geringeren z-index aufweist als die Boxen B, 3 und 4.

<!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" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Die Eigenschaft 'z-index'</title>
    
    <style type="text/css">
      /* <![CDATA[ */
      div {
        width: 237px;
        height: 150px;
        padding: .5em;
        border: 2px solid black;
        color: black;
        background-color: #ffd;
        position: absolute;
      }
      div div {
        width: 95px;
        height: 90px;
        border: 1px solid black;
        background-color: #ffb;
      }
      #boxA {
        top: 100px;
        left: 80px;
        z-index: 6;
      }
      #box1 {
        top: 35px;
        left: 10px;
        z-index: 1;
      }
      #box2 {
        top: 35px;
        left: 130px;
        z-index: 5;
      }
      #boxB {
        top: 10px;
        left: 10px;
        z-index: 3;
      }
      #box3 {
        top: 35px;
        left: 10px;
        z-index: 2;
      }
      #box4 {
        top: 35px;
        left: 130px;
        z-index: 4;
      }
    /* ]]> */
    </style>
  </head>
  
  <body>
    <div id="boxA">
      Box A (<code>z-index: 6</code>)
      <div id="box1">Box 1 (<code>z-index: 1</code>)</div>
      <div id="box2">Box 2 (<code>z-index: 5</code>)</div>
    </div>
    
    <div id="boxB">
      Box B (z-index: 3)
      <div id="box3">Box 3 (<code>z-index: 2</code>)</div>
      <div id="box4">Box 4 (<code>z-index: 4</code>)</div>
    </div>
  </body>
</html>
Listing 7.6: Die Eigenschaft z-index


Abb. 7.25: Wenn ein Element aufgrund seines z-index über seinem Nachbarelement dargestellt wird, werden auch alle seine Nachkommenelemente über den Nachkommenelementen des Nachbarelements dargestellt

Browserunterstützung

Alle Browser
Die Eigenschaft z-index wird von allen modernen Browsern unterstützt.