position
Trochę ciekawostek – na weekend (czego to ludzie nie wymyślą ...
Elementy pozycjonowania
Uwaga: nie wszystkie elementy stylów s± akceptowane przez przegl±darki, w których rozpoczêto implementacjê stylów.
l
l
l
l
l
l
l
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.
Praktyczne przyk³ady
<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>
lTo jest pierwszy punkt wykazu To jest pierwszy punkt wykazu To jest pierwszy punkt wykazu
lTo jest drugi punkt wykazu To jest drugi punkt wykazu To jest drugi punkt wykazu
lTo jest trzeci punkt wykazu To jest trzeci punkt wykazu To jest trzeci punkt wykazu
Najwygodniej (i najbezpieczniej) jest siê pos³ugiwaæ blokami DIV, które s± najlepiej interpretowane przez przegl±darki.
Pozycjonowanie absolutne
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
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.
Nak³adanie elementów
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=" ">
<div style="position: relative; top: -84px; left: 30px"><img src="enter.gif" width=80 height=114 border=0 alt=" "></div>
<div style="position: relative; top: -168px; left: 60px"><img src="pcq.gif" width=80 height=114 border=0 alt=" "></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.
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 tekst
To jest inny tekst
Pozycja pionowa w stosie
Mo¿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:
To jest jaki¶ tam tekst
To jest inny tekst
Kadrowanie
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.
Rozmiary
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.