logo-tworzenie-stron-legnica

config

Style CSS

Spis alfabetyczny stylów CSS.

Ściąga CSS - przykłady, style CSS alfabetycznie, spis stylów CSS, właściwości CSS, skorowidz stylów CSS.


 

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;
}
 
Witold Czuba Tworzenie stron Warszawa, Wrocław i Legnica | Grafik | Strony , , 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 | Grafik | Strony

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