position

Probieren Sie es aus

position: static;

position: relative;
top: 40px;
left: 40px;

position: absolute;
inset-inline-start: 40px;
inset-block-start: 40px;

position: sticky;
top: 20px;

<section class="default-example" id="default-example">
  <div id="example-element-container">
    <p>
      In this demo you can control the <code>position</code> property for the
      yellow box.
    </p>
    <div class="box"></div>
    <div class="box" id="example-element"></div>
    <div class="box"></div>
    <p class="clear">
      To see the effect of <code>sticky</code> positioning, select the
      <code>position: sticky</code> option and scroll this container.
    </p>
    <p>
      The element will scroll along with its container, until it is at the top
      of the container (or reaches the offset specified in <code>top</code>),
      and will then stop scrolling, so it stays visible.
    </p>
    <p>
      The rest of this text is only supplied to make sure the container
      overflows, so as to enable you to scroll it and see the effect.
    </p>
    <hr />
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</section>

section {
  align-items: flex-start;
  overflow: auto;
}

.box {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  float: left;
  width: 65px;
  height: 65px;
}

.box + .box {
  margin-left: 10px;
}

.clear {
  clear: both;
  padding-top: 1em;
}

#example-element-container {
  position: relative;
  text-align: left;
}

#example-element {
  background-color: yellow;
  border: 3px solid red;
  z-index: 1;
}

Syntax

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Werte

static

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

relative

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

Dieser Wert erzeugt einen neuen Staple-Kontext, wenn der Wert von z-index nicht auto ist. Seine Auswirkung 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 zu seinem nächsten positionierten Vorgänger (falls vorhanden) oder zum initialen Enthaltenen Block positioniert. Seine endgültige Position bestimmt sich durch die Werte von top, right, bottom, und left.

Dieser Wert erzeugt einen neuen Staple-Kontext, wenn der Wert von z-index nicht auto ist. Die Abstände von absolut positionierten Boxen kollabieren nicht mit anderen Abständen.

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 Enthaltenen Block, der bei visuellen Medien der Viewport ist, positioniert. Seine endgültige Position wird durch die Werte von top, right, bottom, und left bestimmt.

Dieser Wert erzeugt immer einen neuen Staple-Kontext. In gedruckten Dokumenten wird das Element auf jeder Seite in derselben Position platziert.

sticky

Das Element wird gemäß dem normalen Fluss des Dokuments positioniert und dann relativ zu seinem nächsten scrollbaren Vorgänger und dem Enthaltenen Block (nächster blockorientierter Vorgänger), einschließlich tabellenbezogener Elemente, basierend auf den Werten von top, right, bottom und left verschoben. Die Verschiebung beeinflusst nicht die Position anderer Elemente.

Dieser Wert erzeugt immer einen neuen Staple-Kontext. Beachten Sie, dass ein klebendes Element sich an seinen nächsten Vorgänger "haftet", der einen "Scrollmechanismus" hat (erstellt, wenn overflow hidden, scroll, auto, oder overlay ist), selbst wenn dieser Vorgänger nicht der tatsächlich nächstscrollbare Vorgänger ist.

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

Beschreibung

Arten der Positionierung

• 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 top und bottom Eigenschaften spezifizieren den vertikalen Versatz von ihrer normalen Position; die left und right Eigenschaften spezifizieren den horizontalen Versatz.
• Ein absolut positioniertes Element ist ein Element, dessen berechneter position-Wert absolute oder fixed ist. Die top, right, bottom, und left Eigenschaften spezifizieren die Abstände von den Rändern des Enthaltenen Blocks des Elements. (Der Enthaltene Block ist der Vorgänger, zu dem das Element positioniert wird.) Wenn das Element Abstände hat, werden diese zum Versatz hinzugefügt. Das Element erstellt einen neuen Blockformatierungs-Kontext (BFC) für seinen Inhalt.
• Ein klebrig positioniertes Element ist ein Element, dessen berechneter position-Wert sticky ist. Es wird als relativ positioniert behandelt, bis sein Enthaltener Block einen festgelegten Schwellenwert überschreitet (wie das Setzen von top auf einen Wert ungleich auto) innerhalb seines Flussstamms (oder des Containers, in dem es scrollt); dann wird es als "festgeklebt" behandelt, bis es auf die gegenüberliegende Kante seines Enthaltenen Blocks trifft.

Meistens 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 so gemacht werden, dass sie den verfügbaren vertikalen Platz ausfüllen, indem sowohl top als auch bottom spezifiziert werden und height unbestimmt bleibt (also auto). Sie können ebenso den verfügbaren horizontalen Platz ausfüllen, indem sowohl left als auch right spezifiziert werden und width auf auto gelassen wird.

Mit Ausnahme des eben beschriebenen Falls (absolut positionierte Elemente, 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, wenn direction rtl ist (Persisch, Arabisch, Hebräisch, etc.).

Barrierefreiheit

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 Understanding WCAG, Guideline 1.4 Erläuterungen
• Visuelle Präsentation: Verstehen von SC 1.4.8 | Berichtigte WCAG 2.0

Leistung & Barrierefreiheit

Scrollende Elemente, die fixed oder sticky Inhalte enthalten, können Leistungs- und Barrierefreiheitsprobleme verursachen. Während ein Benutzer scrollt, muss der Browser den klebrigen oder festen Inhalt an einem neuen Standort neu malen. Abhängig vom Inhalt, der neu gestrichen werden muss, von der Browserleistung und der Verarbeitungsgeschwindigkeit des Geräts, kann der Browser möglicherweise keine Neuumstreichungen mit 60 fps verwalten. Ein solches Szenario kann zu Ruckeln führen und, noch wichtiger, zu Barrierefreiheitsproblemen für Menschen mit Empfindlichkeiten. Eine Lösung besteht darin, will-change: transform zu den positionierten Elementen hinzuzufügen, um das Element in einer eigenen Ebene zu rendern, die Neuumstreichungsgeschwindigkeit zu verbessern und damit Leistung und Barrierefreiheit zu verbessern.

Formale Definition

Formale Syntax

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

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

Beispiele

Relative Positionierung

Relativ positionierte Elemente werden um einen bestimmten Betrag von ihrer normalen Position im Dokument verschoben, ohne dass die Verschiebung andere Elemente beeinflusst. Im folgenden Beispiel beachten Sie, wie die anderen Elemente so platziert werden, 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;
}

Absolute Positionierung

Relativ positionierte Elemente bleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss genommen; daher werden andere Elemente so positioniert, als würde es nicht existieren. Das absolut positionierte Element wird relativ zu seinem nächsten positionierten Vorgänger (d.h. dem nächsten Vorgänger, der nicht static ist) positioniert. Wenn ein positionierter Vorgänger nicht existiert, wird es relativ zum ICB (initialer enthaltener Block) positioniert, der der Enthaltene Block des Wurzenelements 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

Feste Positionierung

Eine feste Positionierung ähnelt der absoluten Positionierung, mit der Ausnahme, dass der Enthaltene Block des Elements der initiale enthaltene Block ist, der durch den Viewport etabliert wird, es sei denn, ein Vorgänger hat die transform, perspective, oder filter Eigenschaft auf etwas anderes als none gesetzt (siehe feste Positionierung enthaltenen Block), der dann dazu führt, dass der Vorgänger die Position des Enthaltenen Blocks des Elements einnimmt. Dies kann verwendet werden, um ein "schwimmendes" Element zu erstellen, das unabhängig vom Scrollen an derselben Position bleibt. Im folgenden Beispiel ist das Feld "Eins" fest auf 80 Pixel vom oberen Rand der Seite und 10 Pixel vom linken Rand platziert. Selbst nach dem Scrollen bleibt es relativ zum Viewport an derselben Stelle. Auch wenn die will-change Eigenschaft auf transform gesetzt ist, wird ein neuer enthaltener Block eingerichtet.

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

Klebrige Positionierung

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 diesen Schwellenwert hinaus ist das Element fest auf 10 Pixel vom oberen Rand fixiert.

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

Liste mit klebrigen Überschriften

Eine häufige Verwendung von klebriger Positionierung ist für die Überschriften in einer alphabetisch geordneten Liste. Die Überschrift "B" erscheint direkt unter den Elementen, die mit "A" beginnen, bis sie vom Bildschirm gescrollt werden. Anstatt mit dem Rest des Inhalts vom Bildschirm zu gleiten, bleibt die Überschrift "B" dann an den oberen Rand des Viewports fixiert, bis alle "B" Elemente vom Bildschirm gescrollt wurden, woraufhin sie von der "C" Überschrift überdeckt wird, und so weiter.

Sie müssen einen Schwellenwert mit mindestens einem von top, right, bottom, oder left für die klebrige Positionierung angeben, um wie erwartet zu funktionieren. Andernfalls wird sie nicht von der relativen Positionierung zu unterscheiden sein.

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: white;
  padding-top: 24px;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: white;
  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-left: 12px;
  white-space: nowrap;
}

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

Ergebnis

Sticky-Position mit allen integren Grenzen

Das folgende Beispiel zeigt das Verhalten eines Elements, wenn alle integrierten Grenzen gesetzt sind. Hier haben wir zwei Glühbirnen-Emojis in einem Absatz. Die Glühbirnen verwenden klebrige Positionierung, und die integrierten Grenzen sind als 50px vom oben, 100px vom rechts, 50px vom unten und 50px vom links angegeben. Ein grauer Hintergrund auf dem übergeordneten div-Element markiert den eingefügten 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;
}

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

Ergebnis

Wenn Sie beide Glühbirnen an ihrer richtigen Stelle platzieren, werden Sie feststellen, dass sie innerhalb des eingefügten Bereichs relativ positioniert sind. Wenn Sie sie aus dem eingefügten Bereich bewegen, bleiben sie an der eingefügten Grenze in dieser Richtung fixiert (klebrig).

Spezifikationen

Browser-Kompatibilität

Siehe auch

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