Pozycja ustalona {position: fixed}

Jak ustawić element, aby nie przesuwał się podczas przewijania strony?

selektor { position: fixed; parametry }

Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:

left: wartość - odległość od lewej krawędzi okna
top: wartość - odległość od górnej krawędzi okna
right: wartość - odległość od prawej krawędzi okna
bottom: wartość - odległość od dolnej krawędzi okna

Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Podanie auto oznacza położenie automatyczne. Można oczywiście łączyć parametry, np. left: 1cm; top: -10px.

Polecenie to działa podobnie jak pozycjonowanie absolutne, z tą różnicą, że pozycja elementu jest zawsze obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło.

Przykład {position: fixed}

Przykład

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`position: fixed`	1 2008-12-11	1 2004-11-09	12 2015-07-29	4 2000-06-28	1 2003-06-23

Komentarze

Zobacz więcej komentarzy