CSS-Kurs / position: relative, absolute, fixed und sticky

Die Eigenschaft position verändert, wie ein Element positioniert wird und wie es am normalen Fluss teilnimmt. relative behält seinen ursprünglichen Platz, absolute und fixed verlassen den Fluss, und sticky kombiniert die Platzierung im normalen Fluss mit begrenztem Anheften beim Scrollen.

Vergleichen Sie Positionierungsmodi mit static

Der normale Fluss ist das Layout, bei dem Elemente entsprechend den Formatierungsregeln des Dokuments Platz einnehmen. Text, der einem absolut positionierten Element folgt, weicht nicht automatisch dafür aus. Wenn ein Element den Fluss verlässt, kann nachfolgender Inhalt seinen früheren Platz einnehmen. Verhindern Sie Überlappungen durch die Layoutstruktur oder geeignetes Padding. Vergleichen Sie Positionierung mit display: block, inline, inline-block und Ausblenden, um diesen Unterschied zu verstehen.

Offsets hängen vom Positionierungsmodus ab. Bei relativer Positionierung verschiebt top: 16px die Box 16px nach unten von ihrer ursprünglichen Position. Bei absoluter Positionierung wird top von der Referenz des containing-block gemessen. Dieselbe Zahl steht daher für unterschiedliche Positionsbeziehungen. Siehe MDN: position.

Lassen Sie den ursprünglichen Abstand mit relative

relative füllt die Platzierung anderer Elemente nicht nach. Selbst wenn Sie eine Karte ein wenig nach unten verschieben, bleibt die ursprüngliche Startposition der nächsten Karte erhalten. Daher kann sie Elemente darunter überlappen oder oben leeren Raum anzeigen. Wenn das Ziel darin besteht, den Abstand des gesamten Dokuments zu ändern, überprüfen Sie zunächst, ob margin, padding und gap angemessen sind, anstatt das relative Top zu verwenden.

Eine weitere Verwendung von relative besteht darin, eine absolute Positionsreferenz für Kinder zu erstellen. Wenn Sie dem übergeordneten Element nur position: relative zuweisen und keinen Versatz angeben, bewegt sich das übergeordnete Element selbst nicht und wird zur Basis für das Kindelement. Die Angabe einer Position bedeutet nicht automatisch, dass alle Elemente überlappen oder aus dem Dokumentenfluss herausfallen.

Finden Sie den Bezugsblock für absolute

Absolute Elemente werden normalerweise relativ zu ihrem nächsten nicht-statischen Vorfahren positioniert. Mit position: relative an der Karte und position: absolute, top und right am Kind entsteht ein Badge innerhalb der Karte. Der positionierte Vorfahr bildet dabei üblicherweise mit seiner Padding-Box den Bezugsblock. Wenn es keinen entsprechenden Vorfahren gibt, wird ein weiter außen liegendes Kriterium verwendet, was dazu führen kann, dass sich das Abzeichen eher zur Seite als zur Karte bewegt. Auch Eigenschaften wie transform können einen Bezugsblock erzeugen. Prüfen Sie deshalb bei den Vorfahren mehr als nur position.

Ein übergeordnetes Element mit nur absolut positionierten Kindern fügt die Höhe seiner Kinder nicht zur Inhaltshöhe im normalen Fluss hinzu. Probleme, bei denen das übergeordnete Element scheinbar null Höhe hat oder die Ränder zusammenfallen, können auftreten, obwohl die Kinder sichtbar sind. Wenn der Inhalt die Höhe des übergeordneten Elements natürlich bestimmen soll, ist es einfacher, ihn zu verwalten, indem die Kinder im Fluss platziert werden und nur die kleinen überlappenden Abzeichen absolut positioniert werden.

Vergleichen Sie den normalen Fluss und ein absolutes Abzeichen

Speichern Sie den folgenden Code als position-flow.html. Die drei Abschnitte bestehen aus dem vorhergehenden Element, Zielelement und nachfolgenden Element in derselben HTML-Reihenfolge. Die 12px der Kartenabzeichen sind der Abstand zu den Bezugskanten der Karte, und das obere Padding wird gesichert, damit es nicht mit dem Hauptteil der Karte überlappt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-flow.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.flow { border: 2px dashed #789; margin-bottom: 40px; margin-right: 24px; }
 .flow > div { height: 56px; padding: 12px; background: #e8f5de; }
 .flow .target { background: #dceefa; }
 .relative .target { position: relative; top: 16px; left: 20px; }
 .absolute { position: relative; }
 .absolute .target { position: absolute; top: 16px; left: 20px; }
 .card { position: relative; padding: 64px 20px 20px; background: #dceefa; max-width: 600px; }
 .badge { position: absolute; top: 12px; right: 12px; padding: 4px 12px; background: #ffe4b5; }
  </style>
</head>
<body>
<h1>Does the original space remain?</h1>
<h2>static</h2><div class="flow static"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>relative</h2><div class="flow relative"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>absolute</h2><div class="flow absolute"><div>Front element</div><div class="target">Target</div><div class="after">Back element</div></div>
<h2>Badge inside the card</h2><div class="card"><span class="badge">News</span><p>The badge sits at the top right of the card. Top padding separates it from the text.</p></div>
</body>
</html>

1. Vergleichen Sie die Position des folgenden Elements in den statischen und relativen Abschnitten. Selbst wenn das relative Ziel um 16px nach unten verschoben wird, bleibt der Platz für das nachfolgende Element relativ zur ursprünglichen Zielposition erhalten. Bestätigen Sie, indem Sie nur top auf 0 ändern und dann wieder auf 16px zurücksetzen.
2. Ein absoluter Abschnitt nimmt das Ziel aus dem Fluss und platziert das folgende Element unmittelbar nach dem vorhergehenden Element. Wenn Sie die Position von .absolute .target auf static ändern, wird die Höhe des übergeordneten Elements um die Höhe des Ziels erhöht. Nach dem Vergleich wieder auf absolute zurücksetzen.
3. Versuchen Sie, nur die position: relative von .card vom Karten-Abzeichen zu löschen. Nachdem Sie bestätigt haben, dass das Abzeichen nicht mehr an der oberen rechten Ecke der Karte verankert ist, stellen Sie es sofort wieder her. Andere Bedingungen ändern sich nicht.
4. Verlängern Sie die Buchstaben auf dem Abzeichen und überprüfen Sie den Abstand zwischen ihnen und dem Haupttext. absolute verdrängt den Kartentext nicht automatisch, daher sollten Sie, wenn Ihr Abzeichen mehrere Zeilen haben kann, überlegen, ob ein fester Padding allein ausreicht. Nach der Übung kehren Sie zu den ursprünglichen Buchstaben zurück.

Unterscheiden Sie zwischen fixed und sticky scrolling

fixed ist normalerweise am Ansichtsfenster verankert und behält seine Position auf dem Bildschirm bei, selbst wenn das Dokument gescrollt wird. Es kann für kleine Bedienelemente verwendet werden, wie z. B. den oberen Button unten rechts auf dem Bildschirm. Es nimmt keinen Platz im Fluss ein, daher sollten Sie bei einer Sticky-Bar darauf achten, genügend Platz zu lassen, damit sie das Ende des Body-Texts und das Fokusobjekt nicht verdeckt.

Der transform eines Vorfahren kann den Bezugsblock für ein festes Nachkommelement festlegen und damit die übliche Bezugnahme auf das Ansichtsfenster ersetzen. Wenn sich ein festes Element mit einem bestimmten Container bewegt, überprüfen Sie die Eigenschaften der Vorfahren wie transform und filter. Dieses Beispiel schließt diese Eigenschaften aus, um die Positionierung im Ansichtsfenster zu demonstrieren.

Sticky erfordert einen nicht-automatischen Grenzwert wie top auf der Achse, um den Sticky-Effekt zu beobachten. Der Titel ist nicht von Anfang an auf dem Bildschirm fixiert, sondern bleibt in seiner eigenen Flussposition und wird beim Erreichen der oberen Grenze durch Scrollen angeheftet. Wenn er das Ende seines übergeordneten Elements erreicht, bewegt er sich entlang seiner Grenzen und schwebt nicht über dem nächsten Abschnitt weiter.

sticky richtet sich nach dem nächsten Vorfahren mit einem Scrollmechanismus. Diesen können overflow: auto, scroll oder hidden erzeugen, auch wenn dort tatsächlich nicht gescrollt wird. Wenn der tatsächliche Scrollbereich vom erwarteten Vorfahren abweicht oder die Höhe des Containers und des Titels ähnlich ist und kein Platz für Bewegung vorhanden ist, kann die Haftaktion nicht sichtbar sein. Anstatt einfach nur das Overflow zu entfernen, sollte zuerst überprüft werden, welche Elemente scrollbasiert sind.

Beachten Sie die Sticky-Start- und Eltern-Grenzen

Speichern Sie das Beispiel als position-scroll.html. Ein Einführungsbereich von mindestens 320px Höhe hält die Sticky-Überschrift unterhalb der oberen Kante des Anfangs-Viewports. Das Kapitel und der folgende Abschnitt haben genug Höhe, um zu beobachten, wann das Festkleben beginnt und wann die Eltern-Grenze es freigibt.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>position-scroll.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
body { margin: 0; padding-bottom: 80px; }
 .intro { min-height: 320px; padding: 24px; background: #eef2f6; }
 .chapter { min-height: 760px; background: #e8f5de; }
 .sticky { position: sticky; top: 0; margin: 0; padding: 16px; background: #dceefa; border-bottom: 2px solid #789; }
 .chapter p { padding: 16px; }
 .tail { min-height: 900px; padding: 24px; background: #fff2df; }
 .fixed { position: fixed; right: 16px; bottom: 16px; padding: 12px; background: #fff; border: 2px solid #145f8f; }
  </style>
</head>
<body>
<div class="intro" id="top"><h1>A heading that sticks while scrolling</h1><p>The heading below starts in normal flow. It sticks when it reaches the top of the screen and remains within its parent at the end of the chapter.</p></div>
<section class="chapter"><h2 class="sticky">Chapter heading</h2><p>This content is inside the chapter. The extra height lets you observe how long its heading remains sticky.</p></section>
<section class="tail"><h2>Another section</h2><p>Check whether the previous chapter's heading stays above this section.</p></section>
<a class="fixed" href="#top">Back to top</a>
</body>
</html>

1. Stellen Sie vor dem Scrollen sicher, dass der Titel unterhalb des Einführungsbereichs liegt. Scrollen Sie langsam nach unten, sodass der Titel an Ort und Stelle klebt, wenn er die obere Bildschirmkante erreicht. Der obere Link unten rechts befindet sich von Anfang an an derselben Bildschirmposition.
2. Scrollen Sie durch das Kapitel und gehen Sie zu einem anderen Bereich. Sticky-Titel werden bis zum Ende des übergeordneten Kapitels geschoben, aber feste Links bleiben sichtbar. Klicken Sie auf den Link, um zum Einführungsbereich zurückzukehren.
3. Wenn Sie nur top von .sticky auf auto ändern, gibt es keine Grenze auf der vertikalen Achse und es wird wie ein normaler Fluss scrollen. Nach der Bestätigung wieder auf 0 zurücksetzen.
4. Fügen Sie einfach overflow: hidden zu Ihrem .chapter hinzu, um die Sticky-Ergebnisse beim Scrollen im Fenster zu sehen, wenn der nächstgelegene übergeordnete Scrollmechanismus geändert wird. Nach dem Vergleich entfernen Sie die hinzugefügte Deklaration.

Diagnose unerwarteter Positionierung

Wenn sich die Stapelreihenfolge auch nach der Angabe der Position nicht ändert, überprüfen Sie z-index und Stapelkontexte.

1. Überprüfen Sie zuerst, ob noch Platz vorhanden ist. Die Platzierung der umgebenden Elemente variiert je nachdem, ob sie relative/sticky oder absolute/fixed sind.
2. Überprüfen Sie die tatsächliche Position und die angewendeten Werte für top, right, bottom und left in den Entwicklertools. Überprüfen Sie auch, welche Regeln und Media Queries Vorrang haben.
3. Absolute prüft den Basiselternteil, und fixed prüft die Eigenschaft des Elternteils, die das enthaltene Blockelement verändert. Sticky prüft die Grenze, den Scrolling-Elternteil, die Höhe des übergeordneten Elements und den Bewegungsabstand.
4. Wenn die Koordinaten korrekt sind, aber verdeckt werden, unterscheiden Sie zwischen einem Positionsproblem und einer Überlappungsreihenfolge/Overflow-Abschneidung. Ein hoher z-Index löst nicht alle Überdeckungen.