Pozycjonowanie: |
Pozycjonowanie pozwala zdefiniować położenie elementów na stronie internetowej. Elementy można rozmieszczać nie tylko względem brzegów strony, ale również względem jej poszczególnych elementów. Można rozmieszczac elementy tak, że jeden będzie przykrywał inny. |
selektor{ position: rodzaj; parametry;}
|
1 |
Pozycjonowanie relatywne: |
Dzięki temu poleceniu można przesunąć wybrany element w stosunku do naturalnego pozycjonowania elementów. Można łączyć kierunki, czyli jednocześnie ustawić odległość od
na przykład lewej i górnej krawędzi.
Wyraz selektor ma zastosowanie do wszystkich elementów. |
selektor{position: relative; kierunek: wielkość;} |
np: selektor{position: relative; left: 10px; top: 10px;} |
2 |
Pozycjonowanie absolutne: |
Dzięki temu poleceniu można przesunąć wybrany element w stosunku do wybranych krawędzi strony lub też nadrzędnego elementu tworzącego blok. Będzie to niezależne od innych elementów, a także od miejsca wpisania reguły w dokumencie.
Należy zachować ostrożność, używając pozycjonowania absolutnego, ponieważ niekiedy może ono prowadzić do nieprzewidywalnych zachowań.
Można łączyć kierunki, czyli jednocześnie ustawić odległość od na przykład lewej i górnej krawędzi. |
selektor{position: absolute; kierunek: wielkość;} |
selektor{position: absolute; left: 10px; top: 10px;}
|
3 |
Pozycjonowanie ustalone: |
Dzięki temu poleceniu można ustawić na stałe wybrany element w stosunku do krawędzi okna. Można łączyć kierunki, czyli jednocześnie ustawić odległość od na przykład lewej i górnej krawędzi. Składnia reguły będzie wyglądała następująco: |
selektor{position: fixed; kierunek: wielkość;} |
np: selektor{position: fixed; left: 10px; top: 10px;}
|
4 |
Pozycjonowanie statyczne: |
Dzięki temu poleceniu można przywrócić naturalne pozycjonowanie elementów oparte na kolejności występowania w dokumencie HTML. Podanie jakiejkolwiek odległości nie ma żadnego wpływu na pozycję elementu: |
selektor {position: static;}
|
Darmowy hosting zapewnia PRV.PL