Własność CSS position określa sposób pozycjonowania elementów na stronie internetowej. Za jej pomocą wybiera się tylko rodzaj pozycjonowania, natomiast konkretne położenie elementu można określić przy użyciu własności kierunkowych (top, right, bottom i left).
Nadanie własności position innej wartości niż static powoduje utworzenie elementu pozycjonowanego, którego położenie można ustalać za pomocą własności top, right, bottom i left.
Brak definicji tej własności lub ustawienie jej na static (wartość domyślna) powoduje, że element zostaje umieszczony w układzie normalnym i nie reaguje na ustawienia własności kierunkowych.
Wartości i składnia
Własność position jako wartość przyjmuje jedno z następujących słów kluczowych:
absolute- Włącza pozycjonowanie absolutne (zwane też bezwzględnym, ang. absolute positioning), w którym element zostaje wyjęty z układu normalnego elementów na stronie i nie zajmuje wśród nich miejsca, tylko „unosi się” nad nimi, a także nie podlega scalaniu marginesów. Jego dokładne położenie jest ustalane za pomocą własności kierunkowych w odniesieniu do najbliższego pozycjonowanego elementu nadrzędnego albo w odniesieniu do początkowego bloku zawierającego, którym w przypadku przeglądarek jest okno przeglądarki.
To ustawienie powoduje utworzenie kontekstu stosowego tylko wtedy, gdy własność
z-indexma inną wartość niżauto. fixed- Włącza pozycjonowanie stałe (ang. fixed positioning), które jest uważane za rodzaj pozycjonowania absolutnego. W tym przypadku element także zostaje wyjęty z układu normalnego i nie jest dla niego rezerwowana przestrzeń wśród pozostałych elementów w tym układzie. Jego położenie jest ustalane za pomocą własności kierunkowych w odniesieniu do początkowego bloku zawierającego, czyli okna przeglądarki.
To ustawienie zawsze powoduje utworzenie kontekstu stosowego.
relative- Włącza pozycjonowanie relatywne (nazywane też względnym, ang. relative positioning), w którym element najpierw jest umieszczany w układzie normalnym, a następnie zostaje przesunięty względem tej pozycji na podstawie ustawień własności kierunkowych.
Dla elementu pozycjonowanego w ten sposób przeglądarka rezerwuje miejsce na stronie wśród innych elementów i jeśli zostanie on przesunięty, to pozostaje po nim puste miejsce. Przesunięcie elementu pozycjonowanego relatywnie nie ma wpływu na położenie innych elementów.
To ustawienie powoduje utworzenie kontekstu stosowego tylko wtedy, gdy własność
z-indexma inną wartość niżauto. static- Włącza pozycjonowanie statyczne (ang. static positioning), czyli w układzie normalnym. Jest to domyślny sposób pozycjonowania elementów, w którym nie działają własności kierunkowe ani własność
z-index. sticky- Włącza pozycjonowanie kleiste (ang. sticky positioning), w którym początkowe położenie elementu jest ustalane w układzie normalnym, a następnie w odniesieniu do najbliższego nadrzędnego elementu obsługującego przewijanie i bloku zawierającego według ustawień własności kierunkowych.
Przykład
Poniżej znajduje się przykład pozycjonowania stałego elementu div w elemencie body.
<style>
div {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
border: 3px dashed green;
}
</style>
...
<body>
<div></div>
</body>
Ten element div będzie miał 30 pikseli wysokości i 100% szerokości okna oraz będzie miał trzypikselowe przerywane obramowanie w kolorze zielonym. Ponadto zostanie umieszczony wzdłuż dolnej krawędzi okna przeglądarki i pozostanie tam bez względu na ilość treści na stronie. Spójrz na poniższy zrzut ekranu.
Podsumowanie
| Zastosowanie | Wszystkie elementy HTML z wyjątkiem grup kolumn tabeli i kolumn tabeli |
|---|---|
| Obsługiwane wartości | Słowa kluczowe: absolute, fixed, relative, static i sticky |
| Wartość początkowa | static |
| Dziedziczenie | Nie |
| Specyfikacja | CSS Positioned Layout Module Level 3, position |