Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.
Fundamentalną rolę w nadchodzącej fali witryn nowej generacji będzie pełnić pozycjonowanie elementów na stronie, ważne zwłaszcza w dynamicznym HTML. Obecnie dostępny jest tzw. Working Draft - szkic poleceń opracowanych przez W3C Consortium. Część tych poleceń jest akceptowana przez najnowsze przeglądarki, a praktyczne ich zastosowanie można obejrzeć m.in. na stronach kanałów informacyjnych, interpretowanych przez Internet Explorera 4 Preview 2.
<span style="position: relative; left: 200px; top: 50px; width: 400px">Ten akapit...</span>
Ten akapit ma pozycję względną (relative), jest odsunięty od lewego marginesu o 200 pikseli i o 50 pikseli w dół. Pole akapitu ma 400 pikseli szerokości. W rzeczywistości powinien być wyświetlany zaraz pod podaną wyżej definicją, ale pozycjonowanie spowodowało przesunięcie w prawo i w dół.<div style="position:absolute; left:0%; top:0%"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div>
Obrazek odpowiadający tej definicji jest ustawiony "na sztywno" w lewym, górnym rogu strony.
<div style="position: relative; left: 300px; width: 400px">Wykaz odsunięty o 300 pikseli i mający 400 pikseli szerokości</div>
Najwygodniej (i najbezpieczniej) jest się posługiwać blokami DIV, które są najlepiej interpretowane przez przeglądarki.
Elementy pozycjonowane w sposób "absolutny" są wlewane do zarezerwowanych obszarów i zajmują tam miejsce bez względu na pozycję innych elementów. W taki właśnie sposób jest ustawiony obrazek "Enter". Elementy te mogą się nakładać na inne elementy absolutne lub względne, które akurat się tutaj znalazły.
Polecenie pozycjonowania absolutnego może mieć przykładową postać:
position:absolute; left:800px; top:20px
Zalecane jest bardzo uważne i ostrożne stosowanie definicji absolutnych, aby nie popsuć widoku strony, zwłaszcza przy zmianach wielkości okna przeglądarki.
Pozycjonowanie względne odnosi się do miejsca wstawienia definicji. W zaprezentowanym na początku strony przykładzie akapit został przesunięty w prawo i w dół w stosunku do umiejscowienia definicji, za pomocą polecenia:
position:relative; left: 200px; top: 50px
Gdybyśmy zastosowali wartość ujemną, np. top: -50px, akapit zostałby przesunięty w górę.
Pozycjonowanie względne jest bezpieczniejsze z punktu widzenia ostatecznego wyglądu strony i łatwiejsze do kontrolowania.
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 border=0 alt=" ">
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.
Zrozumienie konstrukcji nie nastręcza chyba większych trudności.
W analogiczny sposób można nakładać na siebie bloki tekstu:
To jest jakiś tam tekstMożemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n.
<:div style="position: relative; z-index: 1"><img src="ami.gif" width=80 height=114 border=0 alt=" "><:/div>
<:div style="position: relative; top: -84px; left: 30px; z-index: 3"><img src="enter.gif" width=80 height=114 border=0 alt=" "><:/div>
<:div style="position: relative; top: -168px; left: 60px; z-index: 2"><img src="pcq.gif" width=80 height=114 border=0 alt=" "><:/div>
Obrazki są układane w kolejności od z-index: 1 (na dole) do z-index: 3 (na górze). Poprzednio mieliśmy kolejność Amiga - Enter - PCkurier, a obecnie - Amiga - PCkurier - Enter.
Analogicznie, w przypadku tekstu:
Netscape Communicator pozwala kadrować elementy, czyli "wycinać" z nich widoczny na ekranie fragment. Przykład:
<div style="position:relative; clip: rect(1,60,90,1)">
<img src="ami.gif" width=80 height=114 border=0 alt=" ">
</div>
Liczby 1, 60, 90 i 1 wyznaczają rogi prostokąta - top, right, bottom, left. Obecnie jest możliwe jedynie wycinanie prostokątów.
Elementy mogą przyjmować szerokość i wysokość, definiowane za pomocą poleceń:
width: xx i height: yy
<div style="width: 200px">Ten akapit...</div>
Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli. Ten akapit nie może większej szerokości niż 200 pikseli.
Ustalenie szerokości bloku tekstu pozwala ograniczyć do tej szerokości koloru tła (background-color):
Ustalenie szerokości bloku tekstu pozwala ograniczyć do tej szerokości kolor tła:
Wysokość elementów nie jeszcze interpretowana.