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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Finden Sie das nützlich?

Ähnliche Artikel