position

static

Das Element wird gemäß dem Normalfluss des Dokuments positioniert. Die Eigenschaften top, right, bottom, left und z-index haben keine Wirkung. Dies ist der Standardwert.

relative

Das Element wird gemäß dem Normalfluss des Dokuments positioniert und dann relativ zu sich selbst basierend auf den Werten von top, right, bottom und left versetzt. Der Versatz beeinflusst die Position anderer Elemente nicht; daher ist der Platz, der dem Element im Seitenlayout zugewiesen wird, derselbe, als ob die Position static wäre.

Dieser Wert erstellt einen neuen Stapelfluss, wenn der Wert von z-index nicht auto ist. Seine Wirkung auf table-*-group, table-row, table-column, table-cell und table-caption ist undefiniert.

absolute

Das Element wird aus dem normalen Dokumentfluss entfernt und es wird kein Platz im Seitenlayout für das Element geschaffen. Das Element wird relativ zu seinem nächsten positionierten Vorfahren (falls vorhanden) oder zum initialen enthältlichen Block positioniert. Seine endgültige Position wird durch die Werte von top, right, bottom und left bestimmt.

Dieser Wert erstellt einen neuen Stapelfluss, wenn der Wert von z-index nicht auto ist. Die Ränder von absolut positionierten Boxen kollabieren nicht mit anderen Rändern.

fixed

Das Element wird aus dem normalen Dokumentfluss entfernt und es wird kein Platz im Seitenlayout für das Element geschaffen. Das Element wird relativ zu seinem initialen enthältlichen Block positioniert, der bei visuellen Medien das Viewport ist. Seine endgültige Position wird durch die Werte von top, right, bottom und left bestimmt.

Dieser Wert erstellt immer einen neuen Stapelfluss. In gedruckten Dokumenten wird das Element auf jeder Seite an derselben Stelle platziert.

sticky

Das Element wird gemäß dem Normalfluss des Dokuments positioniert und dann relativ zu seinem nächsten scrollenden Vorfahren und enthältlichen Block (nächster Block-Level-Vorfahre), einschließlich tabellenbezogener Elemente, basierend auf den Werten von top, right, bottom und left versetzt. Der Versatz hat keinen Einfluss auf die Position anderer Elemente.

Dieser Wert erstellt immer einen neuen Stapelfluss. Beachten Sie, dass ein klebriges Element an seinem nächsten Vorfahren "haftet", der einen "Scrollmechanismus" hat (erstellt bei overflow mit hidden, scroll, auto oder overlay), selbst wenn dieser Vorfahre nicht der tatsächlich scrollende Vorfahre ist.

Hinweis: Mindestens eine inset-Eigenschaft (top, inset-block-start, right, inset-inline-end, usw.) muss für die Achse, auf der das Element klebrig gemacht werden soll, auf einen Wert ungleich auto gesetzt sein. Wenn beide inset-Eigenschaften für eine Achse auf auto gesetzt sind, verhält sich der Wert sticky auf dieser Achse wie relative.

• Ein positioniertes Element ist ein Element, dessen berechneter position-Wert entweder relative, absolute, fixed oder sticky ist. (Mit anderen Worten, alles außer static.)
• Ein relativ positioniertes Element ist ein Element, dessen berechneter position-Wert relative ist. Die Eigenschaften top und bottom spezifizieren den vertikalen Versatz von seiner normalen Position; die Eigenschaften left und right spezifizieren den horizontalen Versatz.
• Ein absolut positioniertes Element ist ein Element, dessen berechneter position-Wert absolute oder fixed ist. Die Eigenschaften top, right, bottom und left spezifizieren die Versätze von den Rändern des enthältlichen Blocks. (Der enthältliche Block ist der Vorfahre, relativ zu dem das Element positioniert ist.) Wenn das Element Ränder hat, werden sie zum Versatz hinzugefügt. Das Element schafft einen neuen Blockformatierungskontext (BFC) für seine Inhalte.
• Ein klebrig positioniertes Element ist ein Element, dessen berechneter position-Wert sticky ist. Es wird als relativ positioniert behandelt, bis sein enthältlicher Block einen festgelegten Schwellenwert überschreitet (wie das Setzen von top auf einen anderen Wert als auto) innerhalb seines Flusswurzels (oder des Containers, in dem es gescrollt wird), an welchem Punkt es als "fixiert" behandelt wird, bis es die gegenüberliegende Kante seines enthältlichen Blocks erreicht.

Meistens sind absolut positionierte Elemente, bei denen height und width auf auto gesetzt sind, so dimensioniert, dass sie in ihren Inhalt passen. Nicht-ersetzte, absolut positionierte Elemente können gemacht werden, den verfügbaren vertikalen Raum zu füllen, indem sowohl top als auch bottom angegeben werden und height nicht spezifiziert wird (also auto). Sie können ebenso den verfügbaren horizontalen Raum füllen, indem sowohl left als auch right angegeben werden und width auf auto gelassen wird.

Mit Ausnahme des gerade beschriebenen Falls (von absolut positionierten Elementen, die den verfügbaren Raum füllen):

• Wenn sowohl top als auch bottom spezifiziert sind (technisch gesehen, nicht auto), setzt sich top durch.
• Wenn sowohl left als auch right spezifiziert sind, setzt sich left durch, wenn direction ltr ist (Englisch, horizontales Japanisch, usw.) und right gewinnt, wenn direction rtl ist (Persisch, Arabisch, Hebräisch, usw.).

Stellen Sie sicher, dass Elemente, die mit einem absolute oder fixed Wert positioniert sind, andere Inhalte nicht verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

• MDN Verstehen von WCAG, Leitfaden 1.4 Erklärungen
• Visuelle Darstellung: Verstehen von SC 1.4.8 | Verstehen von WCAG 2.0

Scrollende Elemente, die fixed oder sticky Inhalte enthalten, können Leistungs- und Barrierefreiheitsprobleme verursachen. Wenn ein Benutzer scrollt, muss der Browser den klebrigen oder festen Inhalt an einem neuen Ort neu zeichnen. Abhängig vom Inhalt, der neu gezeichnet werden muss, der Browserleistung und der Verarbeitungsgeschwindigkeit des Geräts, ist es möglich, dass der Browser Neuzeichnungen nicht mit 60 fps verwalten kann. Ein solches Szenario kann zu Ruckeln führen und, was noch wichtiger ist, Barrierefreiheitsbedenken für Menschen mit Empfindlichkeiten hervorrufen. Eine Lösung besteht darin, will-change: transform zu den positionierten Elementen hinzuzufügen, um das Element in seiner eigenen Ebene zu rendern, wodurch die Neuzeichnungsgeschwindigkeit verbessert und somit Leistung und Barrierefreiheit verbessert werden.

position = 
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>  

<running()> = 
  running( <custom-ident> )  

Relativ positionierte Elemente sind um einen bestimmten Betrag von ihrer normalen Position im Dokument versetzt, ohne dass der Versatz andere Elemente beeinflusst. Im untenstehenden Beispiel sehen Sie, wie die anderen Elemente so platziert sind, als ob "Zwei" den Platz seiner normalen Position einnimmt.

HTML

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

Elemente, die relativ positioniert sind, verbleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein absolut positioniertes Element aus dem Fluss genommen; daher werden andere Elemente positioniert, als ob es nicht existieren würde. Das absolut positionierte Element wird relativ zu seinem nächsten positionierten Vorfahren (d.h. dem nächsten Vorfahren, der nicht static ist) positioniert. Wenn ein positionierter Vorfahre nicht existiert, wird es relativ zum ICB (initial enthältlicher Block — siehe auch die W3C-Definition), der der enthältliche Block des Wurzelelements des Dokuments ist, positioniert.

HTML

<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="https://mdn.github.io/shared-assets/images/examples/long.jpg" />
</p>

CSS

* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  inset-block-start: 30px;
  inset-inline-start: 30px;
}

Ergebnis

Feste Positionierung ähnelt der absoluten Positionierung, mit der Ausnahme, dass der enthältliche Block des Elements der initiale enthältliche Block ist, der vom Viewport etabliert wird, es sei denn, ein Vorfahre hat die Eigenschaft transform, perspective oder filter auf etwas anderes als none gesetzt (siehe CSS-Transforms-Spezifikation), was diesen Vorfahren dann veranlasst, die Stelle des enthältlichen Blocks des Elements einzunehmen. Dies kann verwendet werden, um ein "schwebendes" Element zu erzeugen, das unabhängig vom Scrollen an derselben Stelle bleibt. Im untenstehenden Beispiel ist Box "Eins" 80 Pixel von der Oberkante der Seite und 10 Pixel von der linken Seite fest positioniert. Auch nach dem Scrollen bleibt es relativ zum Viewport an derselben Stelle. Auch, wenn die will-change-Eigenschaft auf transform gesetzt ist, wird ein neuer enthältlicher Block etabliert.

HTML

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

Ergebnis

Die folgende CSS-Regel positioniert das Element mit der ID one relativ, bis der Viewport soweit gescrollt wird, dass das Element 10 Pixel vom oberen Rand entfernt ist. Über diesen Schwellenwert hinaus bleibt das Element 10 Pixel vom oberen Rand fixiert.

#one {
  position: sticky;
  top: 10px;
}

Liste mit klebrigen Überschriften

Eine häufige Verwendung der klebrigen Positionierung ist für die Überschriften in einer alphabetisierten Liste. Die Überschrift "B" erscheint direkt unter den Artikeln, die mit "A" beginnen, bis sie aus dem Sichtfeld gescrollt werden. Anstatt mit dem restlichen Inhalt aus dem Sichtfeld zu gleiten, bleibt die Überschrift "B" dann fixiert an der Oberkante des Viewports, bis alle "B"-Elemente aus dem Sichtfeld gescrollt sind, an welchem Punkt es dann von der Überschrift "C" überdeckt wird, und so weiter.

Es muss ein Schwellenwert mit mindestens einem der Werte top, right, bottom, oder left für die klebrige Positionierung angegeben werden, damit sie wie erwartet funktioniert. Andernfalls ist sie von der relativen Positionierung nicht zu unterscheiden.

HTML

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

CSS

* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}

Ergebnis

Klebrige Position mit allen festgelegten Bereichsgrenzen

Das folgende Beispiel zeigt das Verhalten eines Elements, wenn alle Bereichsgrenzen festgelegt sind. Hier haben wir zwei Glühlampen-Emojis in einem Absatz. Die Glühlampen verwenden eine klebrige Positionierung, und die Bereichsgrenzen sind als 50px von oben, 100px von rechts, 50px von unten und 50px von links angegeben. Ein grauer Hintergrund auf dem übergeordneten div-Element markiert den Bereich.

HTML

Use scrollbars to put the light bulbs(💡) in the right place in the following
text:
<div>
  <p>
    The representation of an idea by a light bulb(<span class="bulb">💡</span>)
    is a commonly used metaphor that symbolizes the moment of inspiration or the
    birth of a new idea. The association between a light bulb and an idea can be
    traced back to the invention of the incandescent light bulb(<span
      class="bulb"
      >💡</span
    >) by Thomas Edison in the late 19th century. The light bulb is a powerful
    symbol because it represents illumination, clarity, and the sudden
    brightening of one's thoughts or understanding. When someone has an idea, it
    is often described as a light bulb turning on in their mind, signifying a
    moment of insight or creativity. The image of a light bulb also suggests the
    idea of energy, power, and the potential for growth and development.
  </p>
</div>

CSS

div {
  width: 400px;
  height: 200px;
  overflow: scroll;
  scrollbar-width: thin;
  font-size: 16px;
  font-family: verdana;
  border: 1px solid;
}

p {
  width: 600px;
  user-select: none;
  margin: 0;
  border: 110px solid transparent;
}

.bulb {
  position: sticky;
  inset: 50px 100px 50px 100px;
}

div {
  /* mark area defined by the inset boundaries using gray color */
  background: linear-gradient(#9999, #9999) 100px 50px / 192px 100px no-repeat;
}

Ergebnis

Wenn Sie beide Glühbirnen an ihren richtigen Platz setzen, werden Sie feststellen, dass sie relativ innerhalb des Bereichs positioniert sind. Wenn Sie sie aus dem Bereich herausbewegen, werden sie (klebrig) an die Bereichsgrenze in dieser Richtung fixiert.

• Inset-Eigenschaften
• Learn CSS: Positionierung
• Inset-Eigenschaften für Layout-Positionierung
• CSS positioniertes Layout Module