Dokumentacja CSS z przykładami: Position

Q: Jak pozycjonować element absolutnie względem rodzica?

Nadaj rodzicowi position: relative;, a dziecku position: absolute; z przesunięciami, na przykład top: 0; right: 0;. Bez pozycjonowanego rodzica dziecko jest umieszczane względem strony.

Q: Czym różni się position relative od absolute?

relative zostawia element w przepływie i zmienia tylko miejsce, w którym jest rysowany, zachowując jego pierwotną przestrzeń. absolute usuwa go z przepływu i umieszcza względem pozycjonowanego przodka.

Q: Dlaczego position: sticky nie działa?

Zwykle z jednego z trzech powodów: nie ustawiono top (ani innego przesunięcia), jakiś przodek ma overflow: hidden lub auto i staje się kontenerem przewijania, albo rodzic elementu sticky nie jest wyższy od tego elementu, więc nie ma miejsca na przyklejenie.

Q: Czym różni się fixed od sticky?

fixed jest usuwany z przepływu i przypięty do viewportu (chyba że któryś przodek ma transform lub filter). sticky zostaje w przepływie i przewija się normalnie, dopóki nie osiągnie swojego przesunięcia, a potem trzyma się, dopóki jego rodzic jest na ekranie.

position: absolute w jednym przykładzie

Element pozycjonowany absolutnie jest wyjmowany z normalnego przepływu i umieszczany za pomocą top, right, bottom i left. Te przesunięcia są mierzone od najbliższego przodka, którego position jest inne niż static, dlatego rodzic dostaje position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Usuń position: relative z .card, a plakietka przeskoczy do prawego górnego rogu całej strony, bo nie ma już pozycjonowanego przodka. Ta jedna linijka wyjaśnia większość pytań typu "position absolute nie działa".

Co warto wiedzieć o elementach absolute:

Nie zajmują miejsca. Nagłówek i akapit są ułożone tak, jakby plakietki nie było.
Ich szerokość kurczy się do treści, chyba że ustawisz width albo jednocześnie left i right.
Przesunięcia są mierzone do krawędzi paddingu bloku zawierającego, wewnątrz jego obramowania.

Pięć wartości position

Wartość	W przepływie?	Przesunięcia mierzone od	Typowe użycie
`static` (domyślna)	Tak	Przesunięcia są ignorowane	Zwykłe elementy
`relative`	Tak, jego miejsce zostaje	Jego własnej normalnej pozycji	Punkt odniesienia dla dzieci absolute, drobne przesunięcia
`absolute`	Nie	Najbliższego pozycjonowanego przodka (lub strony)	Plakietki, podpowiedzi, nakładki, przyciski zamykania
`fixed`	Nie	Viewportu	Nagłówki, przyciski czatu, paski cookies
`sticky`	Tak	Swojego kontenera przewijania, gdy osiągnie przesunięcie	Nagłówki tabel, tytuły sekcji, panele boczne

position: relative

Element pozycjonowany względnie zostaje tam, gdzie był w przepływie. Przesunięcia zmieniają miejsce, w którym jest rysowany, ale jego pierwotna przestrzeń pozostaje zarezerwowana, więc nic wokół się nie przesuwa:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

Pudełko 2 jest narysowane 20px niżej i 20px w prawo, zachodząc na pudełko 3, ale pudełko 3 się nie przesunęło: nadal zostawia miejsce na pudełko 2 w jego pierwotnym położeniu. Samo relative rzadko służy do przesuwania elementów; jego główne zadanie to bycie pudełkiem odniesienia dla dzieci absolute.

Przesunięcia i inset

top, right, bottom i left przyjmują długości, procenty (bloku zawierającego) i auto. Skrót inset ustawia wszystkie cztery w tej samej kolejności co margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Ustawienie przeciwległych stron rozciąga element: left: 0; right: 0 sprawia, że jest tak szeroki jak blok zawierający. inset: 0 na dziecku absolute to standardowy sposób na przykrycie karty nakładką.

Wyśrodkowanie przez absolute i transform

top: 50%; left: 50% umieszcza lewy górny róg elementu na środku. translate(-50%, -50%) przesuwa go potem z powrotem o połowę jego własnego rozmiaru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox i grid wyśrodkowują prościej, gdy element może zostać w przepływie; strona o wyśrodkowaniu diva porównuje wszystkie metody.

position: fixed

Element fixed jest umieszczany względem viewportu i zostaje tam, gdy strona się przewija:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Dwie pułapki. Element fixed nie zajmuje miejsca, więc stały nagłówek zasłania górę strony, chyba że dodasz padding-top do body. A jeśli któryś przodek ma transform, filter lub perspective, to ten przodek, a nie viewport, staje się pudełkiem odniesienia, więc element przewija się razem z nim.

position: sticky

Element sticky przewija się normalnie, dopóki nie osiągnie swojego przesunięcia, a potem trzyma się tam, dopóki koniec jego rodzica nie przewinie się dalej. Przewiń pudełko poniżej:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Każda litera przykleja się do góry pudełka przewijania, dopóki jej sekcja jest widoczna, a potem zostaje wypchnięta przez następną, bo element sticky nigdy nie opuszcza swojego rodzica.

Gdy sticky się nie przykleja, sprawdź:

Brak przesunięcia. position: sticky nic nie robi bez top, bottom, left lub right.
Przodek z overflow: hidden, auto lub scroll. Staje się kontenerem przewijania, a jeśli w rzeczywistości się nie przewija, nic się nie przykleja. Użyj overflow: clip, jeśli chcesz tylko ukryć przepełnienie.
Rodzic, który nie jest wyższy od elementu sticky. Nie ma w nim miejsca na przyklejenie.
Rodzic flex lub grid, który go rozciąga. W wierszu flex dodaj align-self: flex-start do przyklejanego panelu bocznego.

Częste błędy

Zapominanie o position: relative na rodzicu elementu absolute.
Używanie absolute do układu strony. Elementy absolute ignorują siebie nawzajem i treść, więc na mniejszych ekranach tekst na siebie nachodzi. Do układu używaj flexboxa lub grid, a absolute do drobnych ozdób.
Przesunięcia na elemencie static. top: 10px nic nie robi bez position.
Walka o to, który element jest na wierzchu. Nachodzące na siebie pozycjonowane elementy są ustawiane według z-index.
Stały nagłówek zasłaniający treść. Dodaj padding do strony albo scroll-padding-top, żeby linki do kotwic lądowały pod nim.

Najczęściej zadawane pytania

Co robi position: absolute?

Wyjmuje element z normalnego przepływu (inne elementy zachowują się tak, jakby go nie było) i umieszcza go za pomocą top, right, bottom i left, mierzonych od jego bloku zawierającego: najbliższego przodka, którego position nie jest static.

Jak pozycjonować element absolutnie względem rodzica?

Nadaj rodzicowi position: relative;, a dziecku position: absolute; z przesunięciami, na przykład top: 0; right: 0;. Bez pozycjonowanego rodzica dziecko jest umieszczane względem strony.

Czym różni się position relative od absolute?

relative zostawia element w przepływie i zmienia tylko miejsce, w którym jest rysowany, zachowując jego pierwotną przestrzeń. absolute usuwa go z przepływu i umieszcza względem pozycjonowanego przodka.

Dlaczego position: sticky nie działa?

Zwykle z jednego z trzech powodów: nie ustawiono top (ani innego przesunięcia), jakiś przodek ma overflow: hidden lub auto i staje się kontenerem przewijania, albo rodzic elementu sticky nie jest wyższy od tego elementu, więc nie ma miejsca na przyklejenie.

Czym różni się fixed od sticky?

fixed jest usuwany z przepływu i przypięty do viewportu (chyba że któryś przodek ma transform lub filter). sticky zostaje w przepływie i przewija się normalnie, dopóki nie osiągnie swojego przesunięcia, a potem trzyma się, dopóki jego rodzic jest na ekranie.

Powiązane zagadnienia