Lekcja 5 - pozycjonowanie

Pozycjownie

Właściwość Position: określa typ metody pozycjonowania  elementu.  W CSS Można wymienić pięć metod pozycjonowania:

 

•  Static
•  Absolute
•  Relative
•  Sticky
•  Fixed

 

 

Postion: Static;

 position: Static; 

Position: Static; nie jest pozycjonowana w żaden specjalny sposób - jest zawsze zgodna z normalnym przepływem strony.
Na obiekty pozycjonowane statycznie nie mają wpływu własciwości: left, right, top, and bottom. Pozycjonowanie statyczne jest rzadko używane ponieważ domyślnie każdy obiekt HTML jest pozycjonowany statycznie.

 

 

Postion: Absolute;

 position: Absolute; 

 

Elementy z position: Absolute; jest pozycjonowany względem najbliższego pozycjonowanego przodka. Jednakże jeśli element pozycjonowany bezwzględnie nie ma pozycjonowanych przodków, używa treści dokumentu. 

• Elementy pozycjonowane Absolute są usuwane z normalnego przepływu i mogą nakładać się na inne elementy!

 

Postion: Relative;

 position: Relative; 

 

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

Ustawienie top, right, left , i bottom 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.

 

 

Postion: Sticky;

 position: Sticky; 

 

Element z position: sticky; jest pozycjonowany na podstawie przewijania użytkownika.Jeżeli podczas scrolowania osiągnie granice okna przeglądarki wtedy zatrzymuje "przykleja sie" w miescju.

 

 

 

Postion: Fixed;

 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.