KAMIL HIBNER

CSS


position: static;

Elementy HTML są domyślnie pozycjonowane statycznie.

Na elementy pozycjonowane statycznie nie mają wpływu właściwości górna, dolna, lewa i prawa.

Element z position: static; nie jest pozycjonowany w żaden specjalny sposób; jest zawsze pozycjonowany zgodnie z normalnym przepływem strony.

Ten kontener ma position: static;


position: relative;

Element z position: relative; jest pozycjonowany względem swojej normalnej pozycji.

Ustawienie górnych, prawych, dolnych i lewych właściwości elementu pozycjonowanego względnie spowoduje, że zostanie on odsunięty od jego normalnego położenia. Inna zawartość nie zostanie dopasowana do luki pozostawionej przez element.

Ten kontener ma position: relative;


position: fixed;

Element z position: fixed; jest pozycjonowany względem widocznego obszaru, co oznacza, że ​​zawsze pozostaje w tym samym miejscu, nawet jeśli strona jest przewijana. Właściwości top, right, bottom i left służą do pozycjonowania elementu.

Stały element nie pozostawia luki na stronie, w której normalnie by się znajdował.

Patrz lewy dolny.

Ten kontener ma position: fixed;


position: absolute;

Element z position: absolute; jest pozycjonowany względem najbliższego pozycjonowanego przodka (zamiast pozycjonowany względem rzutni, jak na stałe).

Jednakże; jeśli element pozycjonowany bezwzględnie nie ma pozycjonowanych przodków, używa treści dokumentu i porusza się wraz z przewijaniem strony.

UWAGA: Elementy pozycjonowane bezwzględnie są usuwane z normalnego przepływu i mogą nakładać się na elementy.

Ten kontener ma position: relative;
Ten kontener ma position: absolute;


positon: sticky;

Element z position: sticky; jest pozycjonowany na podstawie pozycji przewijania użytkownika.

Przyklejony element przełącza się między relative i fixed, w zależności od pozycji przewijania. Jest pozycjonowany względem czasu, aż dana pozycja przesunięcia zostanie osiągnięta w rzutni - wtedy "przykleja się" w miejscu (jak position:fixed).

Ten kontener ma position: sticky;