CSS-Eigenschaft position

Die CSS-Eigenschaft position gibt die Position des Elements in einem Dokument an.

Diese Eigenschaft hat die folgenden Werte:

static
fixed
absolute
relative
sticky

Die Positionierung hat die folgenden Typen:

Positionierte Elemente - wenn ein Element positioniert ist, wird seine Position auf der Seite anhand der Eigenschaften offset bestimmt: top, right, bottom und left. Die Offset-Eigenschaften funktionieren bei statischen Elementen nicht.

Relativ positionierte Elemente - Positionswert ist "relative". Die Eigenschaften top und bottom geben das horizontale Offset von seiner normalen Position an, die Eigenschaften left und right das horizontale Offset.

Absolut positionierte Elemente - der Positionswert ist "absolute" oder "fixed". Die Eigenschaften top, right, bottom and left definieren Offsets von den Rändern des Blocks des Elements.

Klebrig positionierte Elemente - Positionswert ist "sticky". Es wird als eine Mischung aus Elementen "relative" und "fixed" betrachtet.

Anfangswert	static
Gilt für	Alle Elemente
Geerbt	Nein
Animierbar	Nein
Version	CSS2
DOM Syntax	Object.style.position = "sticky";

Syntax

position: static | absolute | fixed | relative | sticky | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      p {
      position: absolute;
      left: 40px;
      top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft position</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.</p>
  </body>
</html>

Versuch es selber!

Ein anderes Beispiel mit allen Werten der Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      #box1 {
      position: static;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box2 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box3 {
      position: relative;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box4 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box5 {
      position: absolute;
      border: 2px solid #666;
      width:320px;
      height: 100px;
      top: 750px;
      right: 25px;
      }
      #box6 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box7 {
      position: fixed;
      border: 2px solid #8ebf42;
      background-color: #eee;  
      width: 300px;
      height: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      }
      #box8 {
      position: absolute;
      border: 2px solid #666;
      top: 70px;
      right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft position</h2>
    <h3>Position: static</h3>
    <p>Das Box1-Element bleibt im natürlichen Fluss der Seite und dient nicht als Ankerpunkt für das absolut positionierte Box2-Element:</p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>Das Box3-Element bleibt im natürlichen Fluss der Seite und dient gleichzeitig als Ankerpunkt für das absolut positionierte Box4-Element:</p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>Das Box5-Element bleibt nicht im natürlichen Fluss der Seite. 
Er positioniert sich nach dem nächstgelegenen Vorfahren und dient gleichzeitig als Ankerpunkt für das absolut positionierte Box6-Element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>Das Box7-Element bleibt nicht im natürlichen Fluss der Seite und positioniert sich entsprechend dem Ansichtsfenster und dient als Ankerpunkt für das absolut positionierte Box8-Element:</p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

Versuch es selber!

Das angegebene Beispiel enthält alle Werte der Eigenschaft position.

Werte

Wert	Beschreibung
static	Die Elemente werden entsprechend dem normalen Fluss des Dokuments platziert. Das ist der Standardwert dieser Eigenschaft.
absolute	ie Elemente werden aus dem Dokumentenfluss entfernt und relativ zu ihrem positionierten Vorfahrenelement positioniert.
fixed	Die Elemente werden aus dem Dokumentenfluss entfernt und relativ zum Browserfenster positioniert.
relative	Die Elemente werden relativ zu ihrer normalen Position platziert.
sticky	Die Elemente werden entsprechend dem normalen Fluss des Dokuments positioniert und dann in Bezug auf ihren nächsten scrollenden Vorfahren und enthaltenden Block versetzt.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.