Pozycjonowanie elementów na stronie

Podczas kodowania do dyspozycji mamy wiele typów pozycjonowania elementów na stronie, ale wyróżniamy z nich głównie takie jak – static, relative, absolute, fixed, sticky.

Każdy z nich służy do ustawiania na stronie poszczególnych elementów żeby osiągnąć większą przejrzystość witryny i możliwość do zwiększenia uwagi użytkownika oraz zachęcić go korzystania właśnie z naszej karty.

Static – to jest domyślny typ pozycjonowania na stronie nawet jeśli go nie użyjemy to on i tak znajdzie się na naszej stronie.

Relative – ten typ pozwala nam za pozycjonowanie elementu względem miejsca gdzie oryginalnie się znajdował np: jeśli ustawimy pozycję elementu right: 26px; top: 25px; to obiekt przesunie się o 26 pikseli w prawo i 25 pikseli w dół względem miejsca w którym był poprzednio.

Absolute – używając tej komendy obiekt na stronie będzie pozycjonowany względem pozycji początkowej (rogów strony) np: jeśli ustawimy element na pozycji top:40px; left: 150px; to obiekt będzie leżał 40 pikseli poniżej górnej krawędzi strony i 150 pikseli od lewej krawędzi strony.

Fixed – pozycja fixed umiejscowiona jest podobnie jak pozycja absolute (też względem rogów strony) lecz tym razem element tom pozostaje na miejscu bez względu na nasz ruch na stronie czyli nie ważne czy zjedziemy na sam dół strony czy przesuniemy ją w prawo to obiekt ten zawsze pozostanie w tym samym miejscu na ekranie.

Sticky – sprawia że obiekt działa jak zwykły pozycjonowany element do momentu gdy zjeżdżamy skrolem, wtedy przykleja się do krawędzi ekranu i zjeżdża z nami, zależnie od kierunku naszego ruchu element przyklei się do danej ściany np: jeśli jedziemy w dół strony to obiekt przyklei się do górnej ściany.