position CSS property

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 entsprechend 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 entsprechend dem Normalfluss 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; daher ist der für das Element im Seitenlayout gewährte Platz derselbe, als wäre die Position static.

Dieser Wert erstellt einen neuen Stacking-Kontext, wenn der Wert von z-index nicht auto ist. Der Effekt 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 im Seitenlayout für das Element erstellt. Das Element wird relativ zu seinem nächstgelegenen 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 erstellt einen neuen Stacking-Kontext, wenn der Wert von z-index nicht auto ist. Die Ränder von absolut positionierten Boxen collapse nicht mit anderen Rändern.

fixed

Das Element wird aus dem normalen Dokumentenfluss entfernt und es wird kein Platz im Seitenlayout für das Element erstellt. Das Element wird relativ zu seinem initialen containing block positioniert, der im Fall von visuellen Medien das Ansichtsfenster ist. Seine endgültige Position 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 Normalfluss des Dokuments positioniert und dann relativ zu seinem nächstgelegenen scrollenden Vorfahren und containing block (nächstgelegener Block-Level-Vorfahr) verschoben, einschließlich table-bezogener Elemente, basierend auf den Werten von top, right, bottom und left. Die Verschiebung beeinflusst die Position anderer Elemente nicht.

Dieser Wert erstellt immer einen neuen Stacking-Kontext. Beachten Sie, dass ein sticky Element an seinem nächstgelegenen Vorfahren „haftet“, der einen „Scroll-Mechanismus“ hat (erstellt, wenn overflow hidden, scroll, auto oder overlay ist), auch wenn dieser Vorfahre nicht der nächstgelegene tatsächlich scrollende Vorfahre ist.

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

Beschreibung

Arten der Positionierung

• 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 geben den vertikalen Versatz von seiner normalen Position an; die Eigenschaften left und right geben den horizontalen Versatz an.
• Ein absolut positioniertes Element ist ein Element, dessen berechneter position-Wert absolute oder fixed ist. Die Eigenschaften top, right, bottom, und left geben die 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 Ränder hat, werden diese zum Versatz hinzugefügt. Das Element erzeugt einen neuen block formatting context (BFC) für seinen Inhalt.
• Ein sticky positioniertes Element ist ein Element, dessen berechneter position-Wert sticky ist. Es wird als relativ positioniert behandelt, bis sein containing block einen bestimmten Schwellenwert überschreitet (z. B. indem top auf einen anderen Wert als auto gesetzt wird) innerhalb seines Fluss-Roots (oder des Containers, in dem es scrollt), und wird dann als „angeheftet“ behandelt, bis es den gegenüberliegenden Rand seines containing block erreicht.

In der Regel werden absolut positionierte Elemente, bei denen height und width auf auto gesetzt sind, so dimensioniert, dass sie ihrem Inhalt entsprechen. Nicht-ersetzte, absolut positionierte Elemente können so gestaltet werden, dass sie den verfügbaren vertikalen Raum ausfüllen, indem sowohl top als auch bottom angegeben und height nicht spezifiziert wird (also auto). Ebenso können sie so gestaltet werden, dass sie den verfügbaren horizontalen Raum ausfüllen, indem sowohl left als auch right angegeben und width auf auto belassen wird.

Außer im eben beschriebenen Fall (bei dem absolut positionierte Elemente den verfügbaren Raum füllen):

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

Barrierefreiheit

Stellen Sie sicher, dass Elemente, die mit einem absolute oder fixed Wert positioniert sind, keinen anderen Inhalt verdecken, wenn die Seite zur Vergrößerung der Textgröße gezoomt wird.

• MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
• Visuelle Präsentation: Verständnis SC 1.4.8 | Verständnis WCAG 2.0

Leistung & Barrierefreiheit

Das Scrollen von Elementen, die fixed oder sticky Inhalte enthalten, kann Leistungs- und Barrierefreiheitsprobleme verursachen. Wenn ein Benutzer scrollt, muss der Browser den sticky oder fixed Inhalt an einem neuen Ort neu zeichnen. Abhängig vom Inhalt, der neu gezeichnet werden muss, von der Browserleistung und der Verarbeitungsgeschwindigkeit des Geräts, kann der Browser möglicherweise keine Neuzeichnungen mit 60 fps verwalten. Ein solches Szenario kann zu Jank führen und, noch wichtiger, Barrierefreiheitsprobleme für Personen mit Empfindlichkeiten verursachen. Eine Lösung besteht darin, will-change: transform zu den positionierten Elementen hinzuzufügen, um das Element in seiner eigenen Ebene zu rendern, die Neuzeichnungsgeschwindigkeit zu verbessern und dadurch die Leistung und Barrierefreiheit zu verbessern.

Formale Definition

Formale Syntax

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

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

Beispiele

Relatives Positionieren

Relativ positionierte Elemente sind 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 platziert sind, als ob "Two" den Platz seiner normalen Position einnähme.

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

Absolutes Positionieren

Elemente, die relativ positioniert sind, bleiben im normalen Fluss des Dokuments. Im Gegensatz dazu wird ein Element, das absolut positioniert ist, aus dem Fluss entfernt; daher werden andere Elemente so positioniert, als ob es nicht existiert. Das absolut positionierte Element wird relativ zu seinem nächstgelegenen positionierten Vorfahren positioniert (d.h. dem nächstgelegenen Vorfahren, der nicht static ist). Wenn ein positionierter Vorfahre nicht existiert, wird es relativ zum ICB (initial containing block) positioniert, welches der Containing Block des Wurzelelements 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

Fixiertes Positionieren

Fixiertes Positionieren ist ähnlich wie absolutes Positionieren, mit der Ausnahme, dass der containing block des Elements der initiale Containing Block ist, der durch das Ansichtsfenster festgelegt wird, es sei denn, ein Vorfahre hat die Eigenschaft transform, perspective oder filter auf etwas anderes als none gesetzt (siehe fixiertes Positionieren Containing Block), was dann verursacht, dass dieser Vorfahre den Platz des containing block des Elements übernimmt. Dies kann verwendet werden, um ein "schwebendes" Element zu erstellen, das unabhängig vom Scrollen an derselben Position bleibt. Im folgenden Beispiel ist das Kästchen "One" fest 80 Pixel von der Oberseite der Seite und 10 Pixel von links positioniert. Selbst nach dem Scrollen bleibt es an derselben Stelle relativ zum Ansichtsfenster. Außerdem wird, wenn die will-change-Eigenschaft auf transform gesetzt ist, 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

Sticky Positionieren

Die folgende CSS-Regel positioniert das Element mit der ID one relativ, bis das Ansichtsfenster so gescrollt wird, dass das Element 10 Pixel von oben entfernt ist. Über diesen Schwellenwert hinaus wird das Element 10 Pixel von oben fixiert.

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

Liste mit sticky Überschriften

Eine häufige Verwendung von sticky Positionierung ist für die Überschriften in einer alphabetisch sortierten Liste. Die Überschrift "B" erscheint direkt unter den Elementen, die mit "A" beginnen, bis sie aus dem Bildschirm gescrollt werden. Anstatt mit dem Rest des Inhalts vom Bildschirm zu gleiten, bleibt die Überschrift "B" dann oben im Ansichtsfenster fixiert, bis alle "B"-Elemente vom Bildschirm gescrollt sind, woraufhin sie von der Überschrift "C" abgedeckt wird und so weiter.

Sie müssen eine Schwelle mit mindestens einem der top, right, bottom oder left für die sticky Positionierung angeben, um wie erwartet zu funktionieren. 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: 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 inset Grenzen gesetzt

Das folgende Beispiel demonstriert das Verhalten eines Elements, wenn alle inset Grenzen gesetzt sind. Hier haben wir zwei Glühbirnen-Emojis in einem Absatz. Die Glühbirnen verwenden sticky Positionierung, und die inset Grenzen sind wie folgt angegeben: 50px von oben, 100px von rechts, 50px von unten, und 50px von links. 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;
}

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 ihren richtigen Platz setzen, werden Sie feststellen, dass sie relativ innerhalb des inset Bereichs positioniert sind. Wenn Sie sie aus dem inset Bereich herausbewegen, werden sie in Richtung der jeweiligen inset Grenze fixiert (sticky).

Spezifikationen

Browser-Kompatibilität

Siehe auch

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