position

static

Das Element wird entsprechend dem normalen Fluss des Dokuments positioniert. Die Eigenschaften top, right, bottom, left und z-index haben keine Wirkung. Dies ist der Standardwert.

relative

Das Element wird entsprechend dem normalen Fluss des Dokuments positioniert und dann relativ zu sich selbst basierend auf den Werten von top, right, bottom und left verschoben. Die Verschiebung hat keine Auswirkungen auf die Position anderer Elemente; daher bleibt der Platz, der dem Element im Seitenlayout zugewiesen wird, gleich, als wäre die Position static.

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

absolute

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

Dieser Wert erstellt einen neuen Stacking-Kontext, wenn der Wert von z-index nicht auto ist. Die Außenabstände von absolut positionierten Boxen kollabieren nicht mit anderen Außenabständen.

fixed

Das Element wird aus dem normalen Dokumentfluss entfernt, und es wird kein Platz für das Element im Seitenlayout erstellt. Das Element wird relativ zu seinem initialen Containing Block positioniert, welches im Falle von visuellen Medien das Viewport ist. Seine Endposition wird durch die Werte von top, right, bottom und left bestimmt.

Dieser Wert erstellt immer einen neuen Stacking-Kontext. In gedruckten Dokumenten wird das Element auf jeder Seite an derselben Position platziert.

sticky

Das Element wird entsprechend dem normalen Fluss des Dokuments positioniert und dann relativ zu seinem nächstgelegenen scrollenden Vorfahren und Containing Block (nächstgelegener Block-Vorfahre), einschließlich tabellenbezogener Elemente, basierend auf den Werten von top, right, bottom und left verschoben. Die Verschiebung hat keine Auswirkungen auf die Position anderer Elemente.

Dieser Wert erstellt immer einen neuen Stacking-Kontext. Beachten Sie, dass ein Sticky-Element an seinem nächstgelegenen Vorfahren "haftet", der einen "Scrolling-Mechanismus" hat (erstellt, wenn overflow auf hidden, scroll, auto oder overlay gesetzt ist), selbst wenn dieser Vorfahre nicht der tatsächlich nächstgelegene scrollende Vorfahre ist.

Hinweis: Mindestens eine inset-Eigenschaft (top, inset-block-start, right, inset-inline-end, usw.) muss auf einen Wert gesetzt werden, der nicht auto ist, damit die Achse, auf der das Element sticky gemacht werden soll, funktioniert. Wenn beide inset-Eigenschaften für eine Achse auf auto gesetzt sind, verhält sich der sticky-Wert 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, es ist alles außer static.)
• Ein relativ positioniertes Element ist ein Element, dessen berechneter position-Wert relative ist. Die Eigenschaften top und bottom geben den vertikalen Offset von seiner normalen Position an; die Eigenschaften left und right geben den horizontalen Offset an.
• Ein absolut positioniertes Element ist ein Element, dessen berechneter position-Wert absolute oder fixed ist. Die Eigenschaften top, right, bottom, und left geben Versätze von den Kanten des Containing Block des Elements an. (Der Containing Block ist der Vorfahre, relativ zu dem das Element positioniert wird.) Wenn das Element Außenabstände hat, werden diese zum Offset addiert. Das Element erstellt einen neuen Blockformatierungskontext (BFC) für seinen Inhalt.
• Ein sticky positioniertes Element ist ein Element, dessen berechneter position-Wert sticky ist. Es wird als relativ positioniert betrachtet, bis sein Containing Block innerhalb seines Fluss-Ursprungs (oder des Containers, in dem es scrollt) eine definierte Schwelle überschreitet (wie das Setzen von top auf einen anderen Wert als auto), an welchem Punkt es als "haften" betrachtet wird, bis es die gegenüberliegende Kante seines Containing Block erreicht.

Absolut positionierte Elemente, die height und width auf auto gesetzt haben, werden meist so dimensioniert, dass sie ihren Inhalt aufnehmen. Allerdings können nicht-ersetzte, absolut positionierte Elemente so eingestellt werden, dass sie den verfügbaren vertikalen Raum durch das Festlegen sowohl von top als auch von bottom ausfüllen, während height unbestimmt (das heißt, auto) bleibt. Ähnlich können sie den verfügbaren horizontalen Raum ausfüllen, indem sowohl left als auch right spezifiziert und width als auto belassen wird.

Mit Ausnahme des oben beschriebenen Falls (bei dem absolut positionierte Elemente den verfügbaren Raum füllen):

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

Stellen Sie sicher, dass Elemente, die mit einem Wert von absolute oder fixed positioniert sind, keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Schriftgröße zu erhöhen.

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

Scrollende Elemente, die fixed oder sticky-Inhalte enthalten, können Leistungs- und Zugänglichkeitsprobleme verursachen. Wenn ein Benutzer scrollt, muss der Browser den Sticky- oder Fixed-Inhalt an einem neuen Standort neu zeichnen. Je nach Inhalt, der neu gezeichnet werden muss, der Browserleistung und der Verarbeitungsgeschwindigkeit des Geräts, ist es dem Browser möglicherweise nicht möglich, Neuzeichnungen mit 60 fps zu verwalten. Ein solches Szenario kann zu Ruckeln und, was noch wichtiger ist, zu Zugänglichkeitsprobleme für Menschen mit Sensibilitäten führen. 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 damit die Leistung und Zugänglichkeit gesteigert wird.

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

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

Relativ positionierte Elemente sind eine bestimmte Menge von ihrer normalen Position im Dokument versetzt, wobei die Verschiebung andere Elemente nicht beeinflusst. Beachten Sie im folgenden Beispiel, wie die anderen Elemente platziert sind, als ob "Two" den Platz seiner normalen Position einnehmen würde.

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;
}

Relativ positionierte Elemente verbleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss entfernt; daher werden andere Elemente positioniert, als ob es nicht existieren würde. Das absolut positionierte Element wird relativ zu seinem nächstgelegenen positionierten Vorfahren positioniert (d.h. dem nächstgelegenen Vorfahren, der nicht static ist). Wenn kein positionierter Vorfahre existiert, wird es relativ zum ICB (initial Containing Block) positioniert, welches der Containing Block des Stamm-Elements des Dokuments ist.

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

Fixed Positionierung ist ähnlich der absoluten Positionierung, mit der Ausnahme, dass der Containing Block des Elements der initiale Containing Block ist, der durch das Viewport etabliert ist, es sei denn, ein Vorfahre hat transform, perspective oder filter auf einen anderen Wert als none gesetzt (siehe Fixierte Positionierungs-containing block), wodurch dieser Vorfahre die Stelle des Containing Block des Elements einnimmt. Dies kann verwendet werden, um ein "schwebendes" Element zu erstellen, das unabhängig vom Scrollen an derselben Position bleibt. Im folgenden Beispiel ist Box "One" auf 80 Pixel vom oberen Rand der Seite und 10 Pixel vom linken Rand fixiert. Auch nach dem Scrollen bleibt es an derselben Stelle relativ zum Viewport. Auch wenn die will-change-Eigenschaft auf transform gesetzt ist, wird ein neuer containing block erstellt.

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 das Viewport so gescrollt wird, dass das Element 10 Pixel vom oberen Rand entfernt ist. Über diesem Schwellenwert ist das Element fest auf 10 Pixel vom oberen Rand fixiert.

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

Liste mit sticky Überschriften

Eine häufige Verwendung für sticky Positionierung sind die Überschriften in einer alphabetisierten Liste. Die "B"-Überschrift wird direkt unter den Elementen erscheinen, die mit "A" beginnen, bis diese aus dem Bildschirm gescrollt sind. Anstatt mit dem Rest des Inhalts aus dem Bildschirm zu gleiten, bleibt die "B"-Überschrift dann fest am oberen Rand des Viewports, bis alle "B"-Elemente aus dem Bildschirm gescrollt sind, worauf sie von der "C"-Überschrift überdeckt wird, und so weiter.

Sie müssen eine Schwelle mit mindestens einem der top, right, bottom, oder left-Werte für die sticky Positionierung angeben, damit diese wie erwartet funktioniert. Andernfalls ist sie nicht von der relativen Positionierung 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

Sticky Position mit allen festgelegten Inset-Grenzen

Das folgende Beispiel demonstriert das Verhalten eines Elements, wenn alle Inset-Grenzen festgelegt sind. Hier haben wir zwei Glühbirnen-Emojis in einem Absatz. Die Glühbirnen verwenden sticky Positionierung, und die Inset-Grenzen sind als 50px vom oberen Rand, 100px vom rechten Rand, 50px vom unteren Rand und 50px vom linken Rand angegeben. Ein grauer Hintergrund auf dem übergeordneten div-Element markiert den Inset-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 Inset-Bereichs positioniert sind. Wenn Sie sie aus dem Inset-Bereich herausbewegen, haften sie (sticky) an der Inset-Grenze in diese Richtung.

• Inset-Eigenschaften
• CSS lernen: Positionierung
• Inset-Eigenschaften für das positionierte Layout
• CSS positionierte Layout-Module