| 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 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 |
| 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 | |
| selektor {position: absolute; kierunek: wielkość;} | |
| np. 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 |
|
| selektor {position: fixed; kierunek: wielkość;} | |
| np. selektor {position: fixed; left: 10px; top: 10px;} | |
| 5 | Kolejność nakładania (warstwy nakładające się) |
rodzaj:
|
|
| selektor {position: rodzaj; kierunek: wielkość; z-index: kolejność;} | |
| 6 | Przycinanie elementu |
| Dzięki temu poleceniu można przyciąć element z czterech stron: od góry, prawej strony, od dołu i od lewej strony | |
| 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 | Przycinanie elementu |
| Dzięki temu poleceniu można przyciąć element z czterech stron: od góry, prawej strony, od dołu i od lewej strony | |
| 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);} |