config

Strona w trakcie modernizacji

Zapraszamy wkrótce

Właściwość CSS position

Definicja stylu, przeznaczenie i użycie position

Właściwość position określa typ metody pozycjonowania używanej dla elementu (static, relative, absolute, fixed lub sticky).

Wartości właściwości position

Wartość Opis
static Domyślna wartość. Elementy są renderowane w kolejności, w jakiej pojawiają się w obiegu dokumentu.
absolute Element jest pozycjonowany względem swojego pierwszego (nie statycznego) elementu nadrzędnego.
fixed Pozycja elementu HTML jest stała. Nie ulega zmianie podczas przewijania strony.
relative Element zmienia pozycję, ale otaczające go elementy zachowują się tak, jakby element nadal tam był. Element jest pozycjonowany względnie w stosunku do jego określonej pozycji. Np.: left:20px dodaje 20 pikseli do normalnej pozycji elementu.
sticky Element jest pozycjonowany na podstawie pozycji skrolowania użytkownika.

Element zwartością sticky przełącza się między wartościami relative i fixed, w zależności od pozycji przewijania. Jest on pozycjonowany względnie (relative), do viewport - wtedy utknie w jednym miejscu, jak w pozycji fixed.
Uwaga: nieobsługiwane w IE / Edge 15 lub wcześniejszych wersjach. Obsługiwane w Safari od wersji 6.1 z prefiksem -webkit-.

initial Ustawia tę właściwość na jej wartość domyślną.
inherit Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS position

position: static | absolute | fixed | relative | sticky | initial | inherit;

Wsparcie przeglądarek dla właściwości position

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość chrome edge firefox safari opera
position 1.0 7.0 1.0 1.0 4.0

1. position: absolute;
left: 80px;
top: 240px;

2. position: relative;
left: -20px;

3. position: relative;
left: 20px;

4. position: fixed;
top:200px;

5. position: fixed;
top:20px;
right:20px;
bottom:40px;
left:30px;

 

Przykładowe zastosowania z właściwością position

Właściwość CSS:
position:

 
Rezultat:
myDIV
Kod CSS:
div#myDIV {
position:static;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
 

 

Obszar działalności – tworzenie stron internetowych w miastach:

Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe
Adres:, Marynarska 54, 59-220, Legnica, dolnośląskie, Polska, Tel.: +48 780 060 995, Pon. - pt. 8:00 - 17:00

 

Witold Czuba

Tworzenie stron Warszawa, Wrocław i Legnica | Teksty SEO pozycjonujące strony | Grafika na strony internetowe

Marynarska 54
59-220, Legnica,
dolnośląskie, Polska,
Tel.: +48 780 060 995,
Pon. - pt. 8:00 - 17:00