Odległości
| Dane w pigułce | |
| Zastosowanie | ustalanie odległości pozycjonowanego elementu od krawędzi |
| Dziedziczenie | tak |
| Wartości | wielkości absolutne i procentowe, auto |
| Wartość domyślna | auto |
| Przykład | position:relative; left:10% |
| Uwagi | |
| Odpowiednik w HTML | brak |
Aby zdefiniować pozycję elementu, należy wpisać w definicji stylu left: wartość (lub right, top, bottom).
Pozycjonowanie absolutne i względne jest realizowane za pomocą parametrów left, right, top i bottom, którym przypisujemy jednostki miary, np. piksele, centymetry czy procenty.
Jak widzieliśmy to w przykładach w sekcji o pozycjonowaniu, możemy zastosować takie definicje, jak:
<p style="position:relative; left:10%">Przykładowy akapit</p>
Przykładowy akapit
Pozycjonowanie obrazka - parametr right powoduje, że ilustracja przesuwa się w lewo. Ten sam efekt da left z ujemną wartością.
<img src="../grafika/car1.gif" width="376" height="188" alt="pan samochodzik" style="position:relative; right: 5cm">
Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów:
<div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width="80" height="114" alt="Enter"></div>
<div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width="80" height="114" alt="PCQ"></div>
Wyjaśnienie konstrukcji:
Obrazki mają 80 pikseli szerokości i 114 pikseli wysokości. Blok DIV powoduje ustawianie ich jeden pod drugim. Chcemy jednak, aby kolejne obrazki były przesunięte o 30 pikseli w dół i w prawo w stosunku do poprzedniego. Pierwszy obrazek można wstawić bez definiowania pozycji. Drugi obrazek jest ustawiany pod pierwszym, Musimy więc "cofnąć" go o 84 piksele w górę (114-30), a także przesunąć w prawo o 30 pikseli. Trzeci obrazek musimy przesunąć w górę już o 114+114-60 pikseli, czyli top: -168px. Trzeba go także przesunąć w prawo o 60 pikseli, czyli left: 60px.
Jak widać, powstaje jednak "dziura", którą można zlikwidować, podciągając do góry pozostałe elementy na stronie, np. obejmując je wszystkie blokiem i nadając mu przesunięcie do góry.
W analogiczny sposób można nakładać na siebie bloki tekstu:
<div style="font-size:280%; color:gray;">To jest jakiś tam tekst</div>
<div style="font-size:300%; color:blue; font-weight:bold; position:relative; left: 10px; top: -50px;">To jest inny tekst</div>