Pozycja - CSS-Tricks | Almanach CSS 2025

positionNieruchomość może pomóc manipulować lokalizację elementu, na przykład:

.element ( position: relative; top: 20px; )

Względem pierwotnego położenia powyższy element zostanie teraz przesunięty w dół o 20 pikseli w dół. Gdybyśmy mieli animować te właściwości, moglibyśmy zobaczyć, jak dużą kontrolę daje nam to (chociaż nie jest to dobry pomysł ze względu na wydajność):

relativejest tylko jedną z sześciu wartości positionwłaściwości. Oto inni:

Wartości

static: każdy element ma domyślnie pozycję statyczną, więc element będzie trzymał się normalnego przepływu strony. Więc jeśli istnieje zestaw lewy / prawy / górny / dolny / z-indeks, nie będzie to miało wpływu na ten element.
relative: oryginalna pozycja elementu pozostaje w przepływie dokumentu, podobnie jak staticwartość. Ale teraz lewy / prawy / górny / dolny / z-index będzie działać. Właściwości pozycyjne „przesuwają” element z pierwotnego położenia w tym kierunku.
absolute: element jest usuwany z przepływu dokumentu, a inne elementy będą zachowywać się tak, jakby go tam nie było, podczas gdy wszystkie inne właściwości pozycyjne będą na nim działać.
fixed: element jest usuwany z przepływu dokumentu jak elementy pozycjonowane bezwzględnie. W rzeczywistości zachowują się prawie tak samo, tylko elementy o stałej pozycji odnoszą się zawsze do dokumentu, a nie do żadnego konkretnego elementu nadrzędnego i przewijanie nie ma na nie wpływu.
sticky(eksperymentalnie): element jest traktowany jak relativewartość, dopóki położenie przewijania widoku ekranu nie osiągnie określonego progu, w którym to momencie element przyjmuje fixedpozycję, w której ma się trzymać.
inherit: positionwartość nie jest kaskadowa, więc można jej użyć do wymuszenia, a inheritwartość pozycjonowania pochodzi od jej elementu nadrzędnego.

Absolutny

Jeśli element potomny ma absolutewartość, element nadrzędny będzie zachowywał się tak, jakby w ogóle nie było dziecka:

.element ( position: absolute; )

A kiedy staramy się ustawić inne wartości, takie jak left, bottomi rightdowiemy, że element dziecko nie odpowiada wymiarom jego rodzica, ale dokument:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

Aby element potomny był pozycjonowany absolutnie względem elementu nadrzędnego, musimy ustawić to na samym elemencie nadrzędnym:

.parent ( position: relative; )

Teraz właściwości, takie jak left, right, bottomi topbędzie odnosić się do elementu nadrzędnego, tak, że jeśli wykonujemy element dziecko przejrzysty widzimy, że siedzi tuż przy dnie rodzica:

Naprawiony

fixedWartość jest zbliżona do absolutejak może pomóc ustawić element w dowolnym miejscu w stosunku do dokumentu, jednak wartość ta nie ma wpływu przewijania. Zobacz element podrzędny w poniższym demo i zobacz, jak po przewinięciu nadal przykleja się do dołu strony:

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom	Firefox	TO ZNACZY	Brzeg	Safari
4	2	7	12	3.1

Telefon komórkowy / tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Lepki

stickyWartość jest jak kompromisu pomiędzy relativei fixedwartości. W chwili pisania tego tekstu jest to obecnie wartość eksperymentalna, co oznacza, że nie jest częścią oficjalnej specyfikacji i tylko częściowo przyjęta przez wybrane przeglądarki. Innymi słowy, prawdopodobnie nie jest najlepszym pomysłem używanie tego w witrynie produkcyjnej na żywo.

Co to robi? Cóż, pozwala na pozycjonowanie elementu względem czegokolwiek w dokumencie, a następnie, gdy użytkownik przewinie się poza określony punkt w rzutni, ustal pozycję elementu w tym miejscu, aby pozostał on stale wyświetlany jak element z fixedwartość.

Weźmy następujący przykład:

.element ( position: sticky; top: 50px; )

Element zostanie umieszczony względnie, dopóki położenie przewijania rzutni nie osiągnie punktu, w którym element będzie się znajdował 50pxz góry rzutni. W tym punkcie, element staje się lepka i pozostaje w fixedpołożeniu 50pxgórze ekranu.

Poniższe demo ilustruje ten punkt, w którym górna nawigacja jest domyślnym relativepozycjonowaniem, a druga nawigacja jest ustawiona stickyna samej górze widoku. Pamiętaj, że wersja demonstracyjna będzie działać tylko w przeglądarce Chrome, Safari i Opera w momencie pisania tego tekstu.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.