Pozycjonowanie absolute i blok zawierający
Ustawią Państwo elementy absolutnie względem najbliższego przodka z ustalonym pozycjonowaniem.
Pozycjonowanie absolute i blok zawierający to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
position: absolute
Element pozycjonowany absolutnie jest usuwany z normalnego przepływu dokumentu. Inne elementy zachowują się tak, jakby nie istniał. Jego pozycja jest określana względem najbliższego pozycjonowanego elementu nadrzędnego.
Blok zawierający
Blokiem zawierającym dla elementu pozycjonowanego absolutnie jest jego najbliższy przodek z wartością position inną niż static. Jeśli taki przodek nie istnieje, element jest pozycjonowany względem początkowego bloku zawierającego (obszaru widoku).
Konfigurowanie bloku zawierającego
Najczęściej stosowany wzorzec polega na dodaniu position: relative do elementu nadrzędnego, aby obejmował absolutnie pozycjonowane elementy potomne.
<div class="card">Card content<span class="badge">Badge</span></div>
Właściwości przesunięcia z absolute
W przypadku pozycjonowania absolutnego wartości top/right/bottom/left są mierzone od krawędzi dopełnienia bloku zawierającego.
<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>
Centrowanie za pomocą absolute
Klasyczna technika centrowania elementów pozycjonowanych absolutnie:
<div class="center-wrap"><div class="centered">Perfectly centered</div></div>
Szerokość i wysokość elementów absolute
Elementy pozycjonowane absolutnie domyślnie dopasowują swój rozmiar do zawartości (chyba że ustawiono width lub height). Nie rozciągają się już na pełną szerokość kontenera, tak jak elementy blokowe.
Rozciąganie za pomocą wszystkich krawędzi
Ustawienie wszystkich czterech krawędzi na 0 rozciąga element pozycjonowany absolutnie tak, aby wypełnił blok zawierający:
<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>
Skrót inset
Właściwość inset jest skrótem obejmującym jednocześnie top, right, bottom i left:
<div class="cover-wrap"><div class="full-cover"></div></div>
Nakładanie za pomocą z-index
Elementy pozycjonowane absolutnie uczestniczą w kontekstach nakładania. Za pomocą z-index można kontrolować, które nachodzące na siebie elementy absolutne pojawią się na wierzchu.
<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>
Częsty błąd: pominięcie elementu nadrzędnego
Jeśli nie dodadzą Państwo position: relative do elementu nadrzędnego, absolutnie pozycjonowany element potomny zostanie umieszczony względem najbliższego już pozycjonowanego przodka — często obszaru widoku. Zawsze należy sprawdzić blok zawierający.
absolute wewnątrz flex/grid
Kontener flex lub grid nie staje się automatycznie elementem pozycjonowanym. Nadal trzeba jawnie dodać position: relative, aby stał się blokiem zawierającym dla absolutnie pozycjonowanych elementów potomnych.
Szybkie sprawdzenie
Gdzie zostanie umieszczony element pozycjonowany absolutnie, jeśli żaden z jego przodków nie ma wartości position innej niż static?
Podsumowanie
Elementy pozycjonowane absolutnie opuszczają przepływ dokumentu i są pozycjonowane względem najbliższego przodka innego niż statyczny. Aby kontrolować ich położenie, należy zawsze dodać position: relative do elementu nadrzędnego. Użycie inset: 0 rozciąga element absolutny tak, aby wypełnił kontener.
Często zadawane pytania
Czy lekcja „Pozycjonowanie absolute i blok zawierający” jest bezpłatna?
Tak — pełny tekst „Pozycjonowanie absolute i blok zawierający” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pozycjonowanie absolute i blok zawierający”?
Ustawią Państwo elementy absolutnie względem najbliższego przodka z ustalonym pozycjonowaniem. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Pozycjonowanie absolute i blok zawierający”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Pozycjonowanie static i relative
- Pozycjonowanie absolute i blok zawierający
- Pozycjonowanie fixed i sticky
- z-index i kontekst stosu