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.