Przełączaj jeden element między static, relative, absolute, fixed i sticky wewnątrz przewijanego dema. Wyjaśniamy containing block, inset, rozwiązywanie problemów ze sticky i wyśrodkowanie.
Właściwość position określa, jak element jest umieszczany. static to normalny przepływ. relative przesuwa go, zachowując jego miejsce. absolute wyjmuje go z przepływu i umieszcza względem najbliższego pozycjonowanego przodka. fixed przypina go do viewportu. sticky przewija się normalnie, aż dojdzie do progu, takiego jak top: 0, a potem się tam zatrzymuje.
Pięć wartości
Wartość
W przepływie?
Umieszczany względem
Zostaje w przepływie
Niczego, top/left nie działają
Zostaje w przepływie, jego pierwotne miejsce jest zachowane
Swojej normalnej pozycji
Wyjęty z przepływu
Padding box najbliższego pozycjonowanego przodka
Wyjęty z przepływu
Viewportu, chyba że przodek ma transform, filter lub podobne
Zostaje w przepływie
Najbliższego przewijanego przodka, w obrębie swojego rodzica
Demo poniżej ma jedno pomarańczowe pudełko wewnątrz przewijanego obszaru. Zmieniaj jego wartość position, przesuwaj offsety, przewijaj i obserwuj, od czego jest mierzone. Dalej znajdziesz przewodnik po containing block, listę kontrolną dla sticky, który nie chce się przykleić, i skrót inset.
Wybierz wartość position dla pomarańczowego pudełka.
Ustaw top i left oraz włącz lub wyłącz pozycjonowanego rodzica, aby zobaczyć, którego pudełka używa absolute.
Przewijaj wewnątrz dema, aby porównać fixed i sticky.
Skopiuj CSS, który odpowiada temu, co widzisz.
Ustaw position: relative na karcie, a dzieci z absolute użyją tej karty jako swojej ramki. Ten jeden wzorzec obejmuje większość układów z odznakami i nakładkami.
Zamiast pisać osobno top, right, bottom i left, używaj inset: 0.
Element fixed wewnątrz czegokolwiek z transform, filter, perspective lub contain: paint przestaje być przypięty do ekranu. Przenieś go na koniec body albo wyrenderuj w portalu.
Elementy pozycjonowane domyślnie rysują się nad statycznymi. Po z-index sięgaj tylko wtedy, gdy nakładają się dwa elementy pozycjonowane.
Najczęściej zadawane pytania
Czym różni się absolute od relative?
relative przesuwa element wizualnie, ale zostawia jego pierwotne miejsce w układzie, więc nic wokół się nie rusza. absolute całkowicie wyjmuje element z układu, sąsiedzi zamykają lukę, a top czy left są mierzone od najbliższego pozycjonowanego przodka, a nie od miejsca, w którym element by się znalazł.
Dlaczego position: sticky nie działa?
Typowe przyczyny to brak wartości top, przodek z overflow hidden lub auto albo rodzic, który nie jest wyższy od elementu sticky. Przejdź po kolei przez listę kontrolną na tej stronie; pierwsze dwa punkty wyłapują większość przypadków.
Względem czego pozycjonuje się absolute?
Względem swojego containing block: padding boxa najbliższego przodka, którego position ma wartość inną niż static. Kwalifikują się też przodkowie z transform, filter lub niektórymi wartościami contain. Jeśli takiego nie ma, jest to początkowy containing block o rozmiarze viewportu.
Dlaczego mój stały nagłówek przesuwa się razem ze stroną?
Któryś przodek ma transform, perspective, filter, backdrop-filter, will-change: transform lub contain: paint. Każda z tych właściwości zamienia go w containing block dla potomków z fixed, więc nagłówek jest przypięty do niego zamiast do ekranu.
Czym jest inset w CSS?
To skrót dla top, right, bottom i left, działający według tego samego schematu od jednej do czterech wartości co margin. inset: 0 rozciąga pozycjonowany element na cały jego containing block. inset-inline i inset-block ustawiają pary dla każdej osi.
Containing block w prostych słowach
Każdy offset potrzebuje prostokąta odniesienia. Dla elementów static i relative jest to content box rodzica. Dla absolute jest to padding box najbliższego pozycjonowanego przodka, więc padding karty nie wpycha dziecka z absolute do środka.
Dla fixed jest to zwykle viewport. Zmienia się to, gdy przodek dostanie transform, perspective, filter, backdrop-filter, contain: paint lub odpowiadającą wartość will-change: wtedy przodek staje się odniesieniem, a element przewija się razem z nim. Demo na tej stronie wykorzystuje dokładnie to, aby jego pudełko fixed pozostało wewnątrz ramki dema.
Wyśrodkowanie za pomocą pozycjonowania absolute
Przy znanym rozmiarze inset: 0 plus margin: auto umieszcza pudełko dokładnie na środku i zachowuje ostre krawędzie pikseli. Przy nieznanym rozmiarze top: 50% i left: 50%, a po nich translate(-50%, -50%), działa dla dowolnej treści.
Oba sposoby wyjmują pudełko z przepływu, więc rodzic nie urośnie wokół niego. Jeśli rodzic ma dopasować rozmiar do treści, użyj zamiast tego wyśrodkowania przez grid lub flex.
Każda wartość w szczegółach
Wartości position
Wartość
Przepływ
Co robią offsety
Typowe zastosowanie
Zostaje w przepływie
Są ignorowane
Wartość domyślna. Od niej wszystko się zaczyna.
Zostaje w przepływie, jego pierwotne miejsce jest zachowane
Przesuwają go względem miejsca, w którym by był
Drobne przesunięcia i kotwica dla dzieci z absolute.
transform, perspective, rotate, scale lub translate o wartości innej niż none
Tak
Tak
filter lub backdrop-filter o wartości innej niż none
Tak
Tak
contain: layout, paint, strict lub content
Tak
Tak
will-change wskazujące jedną z tych właściwości, na przykład transform lub filter
Tak
Tak
content-visibility: auto
Tak
Tak
Wzorce, których będziesz używać
Odznaka w rogu karty
Karta jest pozycjonowanym przodkiem. Ujemne offsety wypychają odznakę do połowy poza róg.
Przyklejony nagłówek tabeli
Kontener się przewija, więc th z top: 0 przykleja się do niego. Tło sprawia, że wiersze nie prześwitują.
Skrót inset
Ten sam schemat co margin: jedna wartość dla wszystkich stron, dwie dla pionu i poziomu, cztery zgodnie z ruchem wskazówek zegara od góry.
Ustawiłeś próg: top, bottom, left lub right. Bez niego sticky zachowuje się jak relative.
Żaden przodek między elementem a kontenerem przewijania nie ma overflow: hidden, auto ani scroll. Każda z tych wartości czyni go kontenerem przewijania, często takim, który nigdy się nie przewija. overflow: clip nie tworzy kontenera przewijania.
Rodzic jest wyższy niż element sticky. Element przykleja się tylko wtedy, gdy jego rodzic jest na ekranie, a potem odjeżdża razem z nim.
W wierszu flex lub grid element nie jest rozciągnięty na pełną wysokość. Dodaj align-self: start, aby miał miejsce na ruch.
Element sticky leży nad treścią przewijaną pod nim. Nadaj mu tło i z-index, jeśli treść prześwituje.
Przewijanie faktycznie odbywa się na przodku, na którym myślisz, że się odbywa. Sprawdź w DevTools, który element ma pasek przewijania.
Plac zabaw z position
Wartość position
Rodzic ma position: relative
Offsety są ignorowane. Pudełko leży w normalnym przepływie między akapitami.
Pudełko jest narysowane z przesunięciem, ale luka w miejscu, gdzie by było, zostaje zachowana. Sąsiedzi się nie ruszają.
Mierzone od rodzica z przerywaną ramką, który ma position: relative.
Brak pozycjonowanego rodzica, więc mierzone jest od przewijanego obszaru dema, czyli następnego pozycjonowanego przodka wyżej.
Przypięte do ramki dema podczas przewijania. Ramka ma transform, co czyni ją containing block zamiast okna przeglądarki.
Przewija się z tekstem, aż znajdzie się top pikseli od góry kontenera przewijania, a potem trzyma się, dopóki jego rodzic nie odjedzie.
Przewijany obszar dema
Przewijaj wewnątrz tej ramki. Tekst jest wypełniaczem, żeby było co przewijać.
Rodzic
Pierwszy akapit przed pudełkiem.
Akapit po pudełku. Obserwuj, czy przesuwa się w górę, gdy pudełko opuszcza przepływ.
Linia {n} dodatkowej treści do przewijania.
Treść po rodzicu, linia {n}.
Kopiuj CSS
Dlaczego fixed zostaje w ramce: ramka ma transform: translateZ(0). Każdy transform zamienia element w containing block dla potomków z fixed. Na prawdziwej stronie bez takiego przodka fixed przyczepia się do okna przeglądarki.
Sticky nie działa: lista kontrolna
Przyklejony nagłówek schowany za inną treścią? Zobacz