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.
Do pozycjonowania służy atrybut position selektor{ position: rodzaj; parametry; }
1 Pozycjonowanie relatywne
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.
selektor {position: relative; kierunek: wielkość;}
np. selektor {position: relative; left: 10px; top: 10px;}
2 Pozycjonowanie absolutne 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.
selektor {position: fixed; kierunek: wielkość;}
np. selektor {position: fixed; left: 10px; top: 10px;}
3 Pozycjonowanie ustalone
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.
selektor {position: fixed; kierunek: wielkość;}
np. selektor {position: fixed; left: 10px; top: 10px;}
4 Pozycjonowanie statyczne
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;}
np. selektor {position:relative; }
5 Kolejność nakładania (warstwy nakładające się)
Można ustalić kolejność nakładania się elementów. W normalnym stanie elementy nakładają się w kolejności wpisywania do dokumentu HTML. Można to zmienić wstawiając własną kolejność.
selektor {position: rodzaj; kierunek: wielkość; z-index: kolejność;}
np. selektor {position: relative; left: 10px; top: 10px;}
6 Przycinanie elementu
Można przyciąć element z czterech stron: od góry, prawej strony, od dołu i od lewej strony. Możliwe jest to tylko przy position: absolute;. Przycięty fragment może być tylko prostokątem
selektor {position: absolute; clip: rect(wartości określają rogi prostokąta: górny-prawy i dolny-lewy.);}
np. selektor {position: absolute; clip: rect(10px 100px 10px 10px);}
7 Ułożenie w pionie
Można ustalić pionowe wyrównanie elementów względem siebie.
selektor {vertical-align: sposób;}
np. selektor {vertical-align:50px; }
8 Ułożenie w poziomie
Można ustalić poziome wyrównanie elementu w stosunku do elementów sąsiadujących. Polecenie nie działa przy pozycjonowaniu absolutnym: position: absolute;.
selektor {float: kierunek;}
np. selektor {float:left; }
9 Przyleganie elementów
Można ustalić położenie elementu następującego po elemencie pływającym poprzedzającym. Polecenie definiuje, która krawędź nie będzie przylegać.
selektor {clear: miejsce;}
np. selektor { clear: none }
10 Sposób wyświetlania
Można nadać określony sposób wyświetlania, inny niż naturalny. Na przykład element wyświetlany w linii, może być wyświetlany w bloku i na odwrót.
selektor {display: sposób;}
np. selektor {display: block; }
11 Widoczność elementu
Można ukryć określony element, aby nie był wyświetlany w przeglądarce. W jego miejscu pojawia się puste pudełko.
selektor {visibility: stan;}
np. selektor {visivility:hidden;}
12 Przezroczystość
Poziom przezroczystości jest nadawany wszystkim elementom objętym przez zdefiniowany selektor.
selektor { opacity: liczba od 0 do 1 }
np. selektor {opacity : 1}