Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Czcionki

Odległości

Email Drukuj PDF

Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos

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">

pan samochodzik

Za pomocą pozycjonowania względnego (ale i absolutnego) możemy łatwo uzyskiwać "efekty specjalne", np. nakładanie elementów:

<img src="ami.gif" width="80" height="114" alt="Ami">
<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>
Ami
Enter
PCQ

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>

To jest jakiś tam tekst
To jest jakiś tam tekst

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 3556
Artykułów : 513
Zakładki : 28
Odsłon : 19062156