Wartości: static, relative, fixed, absolute oraz sticky można przypisać do właściwości
A. position
B. display
C. list-style-type
D. text-transform
Pytanie z egzaminu CKE, czerwiec 2020 (arkusz EE.09-SG-20.06).
Właściwość position w CSS służy do określania sposobu pozycjonowania elementu na stronie, dlatego wartości static, relative, fixed, absolute oraz sticky pasują właśnie do niej. Domyślnie większość elementów ma position: static, czyli układa się normalnie w przepływie dokumentu. Gdy ustawisz position: relative, element nadal zajmuje swoje miejsce, ale można go delikatnie przesunąć przez top, right, bottom lub left. Przy position: absolute element wypada z normalnego układu i pozycjonuje się względem najbliższego przodka z ustawionym pozycjonowaniem. position: fixed przykleja element do okna przeglądarki, np. pasek kontaktu albo przycisk „do góry”. position: sticky jest bardzo praktyczne przy nagłówkach tabel albo menu, które ma trzymać się góry po przewinięciu strony, np. position: sticky; top: 0. Moim zdaniem to jedna z tych właściwości CSS, które naprawdę warto dobrze przećwiczyć w praktyce, bo dużo problemów z layoutem wynika właśnie z mylenia position z display. W dobrych praktykach branżowych używa się jej świadomie, bez przypadkowego ustawiania absolute na wszystko, bo potem strona źle reaguje na różne rozdzielczości i robi się bałagan w responsywności.
Wartości static, relative, fixed, absolute i sticky nie dotyczą sposobu wyświetlania elementu jako blok, flex czy grid, tylko sposobu jego pozycjonowania w układzie strony. Częsty błąd polega na wrzucaniu wszystkich właściwości związanych z wyglądem układu do jednego worka z display. Faktycznie display jest bardzo ważne w CSS, ale odpowiada za typ renderowania elementu, na przykład display: block, inline, inline-block, flex, grid albo none. Nie przyjmuje ono wartości absolute ani sticky, więc zapis display: absolute byłby po prostu niepoprawny i przeglądarka go zignoruje. list-style-type też nie ma z tym związku, bo ta właściwość dotyczy punktorów i numeracji list, np. disc, circle, square, decimal czy none. Używa się jej przy elementach ul, ol i li, a nie do ustawiania położenia pudełka na stronie. text-transform jest jeszcze z innej działki, bo steruje przekształcaniem tekstu, na przykład uppercase, lowercase albo capitalize. Typowe myślenie „skoro coś zmienia wygląd, to pewnie każda wartość CSS może tam pasować” prowadzi tu na manowce. CSS jest dość konsekwenty: każda właściwość ma własny zestaw dozwolonych wartości opisany w specyfikacji. W praktyce, jeśli chcesz przesuwać element względem strony, okna przeglądarki albo rodzica, szukasz position. Jeśli chcesz zmieniać układ elementów, sprawdzasz display. Jeśli styl listy, list-style-type. Jeśli wielkość liter w tekście, text-transform. Taki podział mocno ułatwia debugowanie kodu w DevToolsach.