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 normalen Fluss des Dokuments positioniert und dann relativ zu sich selbst gemäß den Werten von top, right, bottom und left versetzt. Die Versetzung beeinflusst nicht die Position anderer Elemente; der Platz, der dem Element im Seitenlayout zugewiesen wird, bleibt der gleiche, als wäre die Position static.

Dieser Wert erstellt einen neuen Stapelkontext, 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 Dokumentenfluss entfernt, und es wird kein Platz für das Element im Seitenlayout geschaffen. Das Element wird relativ zum nächsten positionierten Vorgänger (falls vorhanden) oder zum initialen Umgebungsblock positioniert. Seine endgültige Position wird durch die Werte von top, right, bottom und left bestimmt.

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

fixed

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

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

sticky

Das Element wird gemäß dem normalen Fluss des Dokuments positioniert und dann relativ zu seinem nächsten Bildlauf-Vorgänger und Umgebungsblock (nächster Blocklevel-Vorgänger), einschließlich tabellenbezogener Elemente, basierend auf den Werten von top, right, bottom und left versetzt. Die Versetzung beeinflusst nicht die Position anderer Elemente.

Dieser Wert erstellt immer einen neuen Stapelkontext. Beachten Sie, dass ein klebriges Element an seinem nächsten Vorgänger "haften" bleibt, der einen "Scrollmechanismus" hat (erzeugt, wenn overflow hidden, scroll, auto oder overlay ist), auch wenn dieser Vorgänger nicht der nächste tatsächlich scrollende Vorgänger ist.

Hinweis: Mindestens eine inset-Eigenschaft (top, inset-block-start, right, inset-inline-end, etc.) muss auf einen Wert ungleich auto gesetzt werden, damit die Achse, auf der das Element klebrig 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, alles außer static.)
• Ein relativ positioniertes Element ist ein Element, dessen berechneter position-Wert relative ist. Die top- und bottom-Eigenschaften geben den vertikalen Versatz von seiner normalen Position an; die left- und right-Eigenschaften geben den horizontalen Versatz an.
• Ein absolut positioniertes Element ist ein Element, dessen berechneter position-Wert absolute oder fixed ist. Die top, right, bottom und left-Eigenschaften geben Versätze von den Rändern des Umgebungsblocks des Elements an. (Der Umgebungsblock ist der Vorfahre, relativ zu dem das Element positioniert wird.) Wenn das Element Ränder hat, werden sie zum Versatz hinzugefügt. Das Element erstellt 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 Umgebungsblock eine bestimmte Schwelle überschreitet (wie das Setzen von top auf einen Wert ungleich auto) innerhalb seiner Flusswurzel (oder des Containers, innerhalb dessen es scrollt), woraufhin es als "festgeklebt" betrachtet wird, bis es die gegenüberliegende Kante seines Umgebungsblocks erreicht.

Meistens sind absolut positionierte Elemente, die height und width auf auto gesetzt haben, so dimensioniert, dass sie ihre Inhalte aufnehmen. Allerdings können nicht-ersetzte, absolut positionierte Elemente so gemacht werden, dass sie den verfügbaren vertikalen Platz ausfüllen, indem sowohl top als auch bottom angegeben werden und height nicht spezifiziert wird (das heißt, auto). Sie können ebenso den verfügbaren horizontalen Platz ausfüllen, indem sowohl left als auch right angegeben werden und width auf auto bleibt.

Außer in dem gerade beschriebenen Fall (von absolut positionierten Elementen, die den verfügbaren Platz ausfü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, etc.) und right gewinnt, 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: Verständnis von WCAG, Erläuterungen zur Richtlinie 1.4
• Visuelle Präsentation: Verständnis von SC 1.4.8 | Verständnis von WCAG 2.0

Das Scrollen von Elementen, die fixed oder sticky Inhalte enthalten, kann Leistungsprobleme und Barrierefreiheitsprobleme verursachen. Während eines Benutzers scrollen, muss der Browser den klebrigen oder fixierten Inhalt an einem neuen Ort neu zeichnen. Abhängig vom Inhalt, der neu gezeichnet werden muss, der Browserleistung und der Verarbeitungsgeschwindigkeit des Geräts, kann es für den Browser schwierig sein, bei 60 fps neu zu zeichnen. Ein solches Szenario kann zu Ruckeln führen und, was noch wichtiger ist, Barrierefreiheitsanliegen für Menschen mit Empfindlichkeiten darstellen. Eine Lösung besteht darin, will-change: transform zu den positionierten Elementen hinzuzufügen, um das Element in seiner eigenen Ebene darzustellen, was die Redraw-Geschwindigkeit verbessert und damit die Leistung und Barrierefreiheit verbessert.

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 die Versetzung andere Elemente beeinflusst. Im folgenden Beispiel ist zu beachten, dass die anderen Elemente so platziert sind, als ob "Zwei" 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;
}

Elemente, die relativ positioniert sind, bleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss herausgenommen; somit werden andere Elemente so platziert, als ob es nicht existieren würde. Das absolut positionierte Element wird relativ zu seinem nächsten positionierten Vorgänger positioniert (d.h. der nächste Vorgänger, der nicht static ist). Wenn kein positionierter Vorgänger existiert, wird es relativ zum ICB (initialer Umgebungsblock), positioniert, der der Umgebungsblock des Stammlisten-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

Die feste Positionierung ist der absoluten Positionierung ähnlich, mit der Ausnahme, dass der Umgebungsblock des Elements der initiale Umgebungsblock ist, der durch den Viewport festgelegt wird, es sei denn, ein Vorfahre hat die Eigenschaft transform, perspective oder filter auf einen anderen Wert als none gesetzt (siehe fester Positionierungs-Umgebungsblock), wodurch dieser Vorfahre die Position des Umgebungsblocks der Elemente übernimmt. Dies kann verwendet werden, um ein "schwebendes" Element zu erstellen, das unabhängig vom Scrollen an derselben Position bleibt. Im folgenden Beispiel ist die Box "Eins" auf 80 Pixel von der Oberseite der Seite und 10 Pixel von der linken Seite fixiert. Selbst nach dem Scrollen bleibt es an derselben Position relativ zum Viewport. Außerdem, wenn die will-change Eigenschaft auf transform gesetzt ist, wird ein neuer Umgebungsblock 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 das Element 10 Pixel von der Oberseite entfernt ist. Jenseits dieser Schwelle wird das Element auf 10 Pixel von der Oberseite fixiert.

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

Liste mit klebrigen Überschriften

Eine häufige Anwendung für sticky Positionierung ist für die Überschriften in einer alphabetisch sortierten Liste. Die "B"-Überschrift erscheint direkt unterhalb der Elemente, die mit "A" beginnen, bis sie vom Bildschirm scrollbar sind. Statt mit dem Rest des Inhalts vom Bildschirm zu rutschen, bleibt die "B"-Überschrift dann an der Oberseite des Viewports fixiert, bis alle "B"-Elemente vom Bildschirm gerutscht sind, woraufhin sie durch die "C"-Überschrift überdeckt wird, und so weiter.

Sie müssen eine Schwelle mit mindestens einem von top, right, bottom oder left für die sticky Positionierung angeben, damit sie sich wie erwartet verhält. 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 eingestellten Grenzen

Das folgende Beispiel demonstriert das Verhalten eines Elements, wenn alle Randgrenzen eingestellt sind. Hier haben wir zwei Glühbirnen-Emojis in einem Absatz. Die Glühbirnen verwenden sticky Positionierung, und die Grenzen sind mit 50px von oben, 100px von rechts, 50px von unten und 50px von links angegeben. Ein grauer Hintergrund auf dem übergeordneten Div-Element markiert den Einsatbereich.

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 ihre richtige Stelle legen, werden sie relativ im Einsatbereich positioniert. Wenn Sie sie aus dem Einsatbereich herausbewegen, sind sie (sticky) an die Grenze in dieser Richtung fixiert.

• Inset-Eigenschaften
• Lernen Sie CSS: Positionierung
• Inset-Eigenschaften für Positionierungs-Layout
• CSS positioniertes Layout module