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 beeinflusst die Position anderer Elemente nicht; der im Seitenlayout für das Element vorgesehene Platz ist derselbe, als wäre die Position static.

Dieser Wert erzeugt einen neuen Staplekontext, 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 geschaffen. Das Element wird relativ zu seinem nächsten positionierten Vorfahren (falls vorhanden) oder zum initialen Containing Block positioniert. Seine endgültige Position wird durch die Werte von top, right, bottom und left bestimmt.

Dieser Wert erzeugt einen neuen Staplekontext, 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 für das Element im Seitenlayout geschaffen. Das Element wird relativ zu seinem initialen Containing Block positioniert, welches im Falle von visuellen Medien der Viewport ist. Seine endgültige Position wird durch die Werte von top, right, bottom und left bestimmt.

Dieser Wert erzeugt immer einen neuen Staplekontext. 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ächsten scrollenden Vorfahren und Containing Block (nächster Blocklevel-Vorfahre), einschließlich tabellenbezogener Elemente, basierend auf den Werten von top, right, bottom und left verschoben. Die Verschiebung beeinflusst die Position anderer Elemente nicht.

Dieser Wert erzeugt immer einen neuen Staplekontext. Beachten Sie, dass ein sticky element sich an seinen nächsten Vorfahren "anheftet", der einen "Scrollmechanismus" hat (erzeugt, wenn overflow auf hidden, scroll, auto oder overlay gesetzt ist), selbst wenn dieser Vorfahre nicht der tatsächlich nächste scrollende ist.

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

• Ein positioniertes Element ist ein Element, dessen berechneter position-Wert entweder relative, absolute, fixed oder sticky ist. (Anders gesagt, es ist 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 Kanten des Containing Block des Elements. (Der Containing Block ist der Vorfahre, relativ zu dem das Element positioniert ist.) Wenn das Element Ränder hat, werden diese zum Versatz addiert. Das Element etabliert einen neuen Block Formatting Context (BFC) für seine Inhalte.
• Ein stickig positioniertes Element ist ein Element, dessen berechneter position-Wert sticky ist. Es wird als relativ positioniert behandelt, bis sein Containing Block eine festgelegte Schwelle überschreitet (z.B. top auf einen anderen Wert als auto gesetzt wird) innerhalb seiner Flusswurzel (oder des Containers, in dem es scrollt), in dem Moment wird es als "steckengeblieben" betrachtet, bis es den gegenüberliegenden Rand seines Containing Block erreicht.

Die meiste Zeit werden absolut positionierte Elemente, deren height und width auf auto gesetzt sind, so dimensioniert, dass sie ihren Inhalt aufnehmen. Nicht-ersetzte, absolut positionierte Elemente können jedoch so eingestellt werden, dass sie den verfügbaren vertikalen Raum ausfüllen, indem sowohl top als auch bottom angegeben werden und height nicht spezifiziert bleibt (das heißt, auto). Sie können ebenso so eingestellt werden, dass sie den verfügbaren horizontalen Raum ausfüllen, indem sowohl left als auch right angegeben werden und width auf auto belassen wird.

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

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

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, Leitlinie 1.4 Erklärungen
• Visuelle Präsentation: Verstehen von SC 1.4.8 | Verstehen von WCAG 2.0

Das Scrollen von Elementen, die fixed- oder sticky-Inhalte enthalten, kann Leistungs- und Barrierefreiheitsprobleme verursachen. Während ein Benutzer scrollt, muss der Browser den sticky oder fixed-Inhalt an einer neuen Position neu zeichnen. Abhängig vom Inhalt, der neu gezeichnet werden muss, der Leistung des Browsers und der Verarbeitungsgeschwindigkeit des Geräts, kann der Browser möglicherweise nicht bei 60 fps neu zeichnen. Ein solches Szenario kann zu Jank und, was noch wichtiger ist, zu Bedenken hinsichtlich der Barrierefreiheit für Menschen mit Empfindlichkeiten 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, und dadurch die Zeichenleistung und somit auch die Leistung und Barrierefreiheit zu verbessern.

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

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

Relativ positionierte Elemente sind um einen bestimmten Betrag von ihrer normalen Position innerhalb des Dokuments versetzt, jedoch ohne dass die Verschiebung andere Elemente beeinflusst. Im folgenden Beispiel beachten Sie, wie die anderen Elemente platziert sind, als ob "Two" den Raum 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, bleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss genommen; andere Elemente werden so positioniert, als ob es nicht existiert. 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 Containing Block) positioniert, das den Containing Block des Wurzelelements des Dokuments darstellt.

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 ist der absoluten Positionierung ähnlich, mit der Ausnahme, dass der Containing Block des Elements der initiale Containing Block ist, der vom Viewport festgelegt wird, es sei denn, ein Vorfahre hat eine transform, perspective oder filter Eigenschaft auf einen anderen Wert als none gesetzt (siehe Fixed Positioning 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 von Scrollvorgängen an derselben Position bleibt. Im folgenden Beispiel ist das Kästchen "One" fest 80 Pixel von oben und 10 Pixel von links der Seite positioniert. Auch nach dem Scrollen bleibt es an derselben Stelle relativ zum Viewport. 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 der Viewport so gescrollt wird, dass sich das Element 10 Pixel vom oberen Rand befindet. Jenseits dieses Schwellenwerts wird das Element fest 10 Pixel vom oberen Rand verankert.

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

Liste mit klebrigen Überschriften

Ein häufiger Verwendungszweck für Sticky-Positionierung sind die Überschriften in einer alphabetisch sortierten Liste. Die "B"-Überschrift erscheint direkt unter den Elementen, die mit "A" beginnen, bis sie aus dem sichtbaren Bereich gescrollt werden. Anstatt mit dem Rest des Inhalts aus dem sichtbaren Bereich zu gleiten, bleibt die "B"-Überschrift dann am oberen Rand des Viewports fixiert, bis alle "B"-Elemente aus dem sichtbaren Bereich gescrollt sind, an welchem Punkt sie von der "C"-Überschrift verdeckt wird, und so weiter.

Es muss ein Schwellenwert mit mindestens einem von top, right, bottom oder left für die Sticky-Positionierung festgelegt werden, um wie erwartet zu funktionieren. Andernfalls wird es sich nicht von relativer Positionierung 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 Einfassungsgrenzen

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

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 stellen, werden Sie feststellen, dass sie relativ innerhalb des Einfassungsbereiches positioniert sind. Wenn Sie sie außerhalb des Einfassungsbereiches bewegen, sind sie fest (sticky) an der Einfassung in dieser Richtung verankert.

• Einfassungs-Eigenschaften
• CSS lernen: Positionierung
• Einfassungs-Eigenschaften für positionierte Layouts
• CSS positioniertes Layout Module