1. Na początku elementy otrzymują
położenie statyczne-nadawane automatycznie.
2. Pozycjonowanie relatywne-przesunięcie elementu w dowolną stronę względem jego położenia spoczynkowego.
np.pozycjonowanie obrazka
img
{
position:
relative; left: 40px; top: 30px;
}
(wyjaśnienie: left-przesunięcie z
lewej strony, top-przesuniecie z góry strony)
Można używać także składni right.
3. Pozycjonowanie absolutne-przesunięcie elementu strony względem wybranych brzegów strony lub obejmującego bloków.Zostanie utworzony na stałe.
np.
img
{
position: absolute;
right:50px; top: 50px;
}
4. Pozycjonowanie ustalone-pozycja elementu jest obliczana względem krawędzi okna przeglądarki. Element nieruchomy podczas przewijania strony, dokładnie w tym samym miejscu.
img
{
position: fixed;
right: px; top: px;
}
5. Pozycjonowanie nagłówka
h1
{
position: absolute;
left: px; top: px;
}
b) tworzenie klasy dla kilku tych
samych nagłówków
h1.nazwa1
{
position: absolute;
left: px; right: px;
}
h1.nazwa2
{
position: absolute;
left: px; right: px;
}
ważne: do html w nagłówku nadajemy
znacznik class="nazwa"
W taki sposób możemy tworzyć cień
dla naszego nagłówka
Także dla każdej klasy możemy
tworzyć osobne kolory, np.
h1.nazwa1
{
position: absolute;
left: px; right: px; color: red;
}
h1.nazwa2
{
position: absolute;
left: px; right: px; color: silver;
}
c)Kolejność wyświetlenia
poszczególnych nagłówków
wartość z-index: 1
np. h1
{
position: absolute;
left: px; right: px; color: red; z-index: 1;
}
6. Oblowanie obrazka tekstem
img
{
float: left; -obrazek
wyświetla się z lewej strony, a tekst
oblewa go ze strony prawej
}
Możliwość stosowania wartości
right; top; bottom;
7. Ustawienie tekstu względem obrazka
(znacznik obrazka musi być wklejony w html do tekstu)
img
{
vertical-align: text-top;
-przeniesienie tekstu na górę
}
Możliwość stosowania tekstu na
środku w pionie, względem obrazka
vertical-align: text-middle;