Pozycjonowanie w CSS3

Plansza interaktywna luty 2015

URL:
http://www.plotkarka.eu/Pi/css3-positioning/
Autor:
Radosław Kowaluk

Schemat pozycjonowania

Pozycja: statyczna, relatywna, absolutna, ustalona, sticky CSS3
position:
static; relative; absolute; fixed; sticky;

Box offsets: ‘top’, ‘right’, ‘bottom’, ‘left’

Od góry
top:
length np. 5px; percentage np. 15%; auto;

relative

relative

relative

absolute

absolute

absolute

Pozycjonowanie

Od prawej
right:
auto; length np. 5px; percentage np. 5%;

relative

relative

relative

absolute

absolute

absolute

Od dołu
bottom:
length np. 1px; percentage np. 1%; auto;

absolute

absolute

absolute

Od lewej
left:
length np. 20px; percentage np. 20%; auto;

relative

relative

relative

Pozycjonowanie

Kadrowanie

Kadrowanie
clip:
auto; rect(top, right, bottom, left)
np. rect(5px,48px,45px,0px);
Layer 1 left top bottom right
Argumenty funkcji rect

Kadrowanie

Warstwy

Kolejność
z-index:
auto; integer np. -1;
przykładowy obraz

Lorem ipsum dolor sit amet,

przykładowy obraz

Lorem ipsum dolor sit amet,

Schemat układania warstw

Warstwy