Net Poradnik

Lista wszystkich pięciu dostępnych wartości position:

• static: jest to pozycjonowanie domyślne, które oznacza, że element jest pozycjonowany zgodnie z naturalnym przepływem dokumentu HTML. Nie ma to wpływu na wartości właściwości top, right, bottom, left lub z-index. Elementy o wartości position: static ignorują właściwości top, right, bottom, left.
• relative: ustawienie position: relative przesuwa element względem jego pierwotnej pozycji. Właściwości top, right, bottom i left określają wartości przesunięcia w pionie i poziomie, a wartość z-index określa, jak element ma być ustawiony względem innych elementów na stronie. Jednocześnie element zachowuje swoje miejsce w przepływie dokumentu HTML.
• absolute: ustawienie position: absolute przesuwa element względem jego pierwszego nadrzędnego elementu pozycjonowanego (czyli takiego, który ma ustawiony position inny niż static). Jeśli nie ma takiego elementu, to pozycjonowanie odbywa się względem elementu body. Właściwości top, right, bottom i left określają wartości przesunięcia w pionie i poziomie, a wartość z-index określa, jak element ma być ustawiony względem innych elementów na stronie. Element absolute jest usuwany z przepływu dokumentu HTML i inne elementy mogą być pozycjonowane na jego miejscu.
• fixed: ustawienie position: fixed przesuwa element względem okna przeglądarki, a nie jego pierwszego nadrzędnego elementu pozycjonowanego. Właściwości top, right, bottom i left określają wartości przesunięcia w pionie i poziomie, a wartość z-index określa, jak element ma być ustawiony względem innych elementów na stronie. Element fixed jest usuwany z przepływu dokumentu HTML i pozostaje widoczny na ekranie nawet podczas przewijania strony.
• sticky: ustawienie position: sticky sprawia, że element zachowuje się jak relative dopóki nie zostanie przewinięty poza swoją położoną początkowo pozycję, a następnie zachowuje się jak fixed. Właściwość top, right, bottom lub left określa odległość, na jaką element ma się przesunąć, gdy zostanie przewinięty poza swoją pierwotną pozycję. Wartość z-index określa, jak element ma być ustawiony względem innych elementów na stronie. Element sticky pozostaje w przepływie

Udostępnij na: