Absolutnφ a relativnφ - P°φklad - Syntaxe - Top a left - Relativnφ poloha - Absolutnφ poloha - P°ekr²vßnφ - Vno°enΘ pozice - Star╣φ prohlφ╛eΦe - NaznaΦenφ skriptovßnφ
Pokud jste d°φve cht∞li n∞co n∞kam p°esn∞ umφstit do webovΘ strßnky, byli jste odkßzßni na tabulky. Ale dne╣nφ nejroz╣φ°en∞j╣φ prohlφ╛eΦe (IE 4 a 5, Netscape 4) podporujφ tzv. CSS pozicovßnφ element∙ (CSS-P). Jak²koliv objekt (obrßzek, tabulka, text, cokoliv) lze nynφ umφstit kamkoliv na strßnku, s objekty se m∙╛e posouvat a mohou se p°ekr²vat. S CSS pozicovßnφm se v dne╣nφm webu setkßte mßlo, podle mΘho nßzoru je to tφm, ╛e to v∞t╣ina editor∙ neumφ zadßvat. Jakmile ale upravujete p°φmo zdroj, jde to snadno. Je ale pot°eba trochu um∞t pracovat s kaskßdov²mi styly.
Existujφ dva naprosto odli╣nΘ druhy pozicovßnφ. Absolutnφ pozice umφstφ objekt do strßnky na udanΘ sou°adnice bez ohledu na okolnφ text. Relativnφ pozice naproti tomu urΦuje pouze, o kolik se mß objekt posunout oproti svΘ normßlnφ poloze.
<body>
|
P°φklad si m∙╛ete zobrazit v prohlφ╛eΦi. Mimochodem tak zjistφte, zda ten vß╣ prohlφ╛eΦ CSS pozicovßnφ podporuje (bude-li to vypadat tak jako na obrßzku). |
Co znamenajφ jednotlivΘ zßpisy:
<tag style="position:(absolute|relative); [top: dΘlka]; [left: dΘlka]; [z-index: Φφslo]">Pozicovan² element</tag>
Samoz°ejm∞ jako u v╣ech CSS vlastnostφ lze pou╛φvat stylopisy, t°φdy a identifikßtory.
Vlastnosti, kterΘ urΦujφ sm∞r a mφru posunutφ. Nßzvy t∞chto vlastnostφ jsou pon∞kud nelogickΘ, tak╛e je pot°eba si zapamatovat, ╛e top urΦuje posunutφ objektu sm∞rem dol∙ a left doprava. Pro posouvßnφ nahoru a doprava se nepou╛φvß down a right, n²br╛ top a left se zßporn²mi hodnotami. Velikost posunu m∙╛ete zadat ve v╣ech jednotkßch, kterΘ CSS podporuje (nejΦast∞ji px, pt nebo cm).
Position: relative je v ka╛dΘm smyslu pouze posunutφ. Okolnφ text se formßtuje bez ohledu na jakoukoliv pozici objektu, to znamenß, ╛e tam, kde by posouvan² objekt m∞l b²t, z∙stßvß prßzdnΘ mφsto. Jin²mi slovy: p°i relativnφ poloze element nenφ vyjmut z toku dokumentu. Obecn∞ doporuΦenΘ pou╛itφ relativnφ polohy neexistuje, pou╛φvß se v∞t╣inou jako takovß legrßcka. Ale je dobrΘ v∞d∞t, ╛e to existuje, proto╛e kdo vφ, co budete kdy pot°ebovat?
Position: absolute mi p°ipadß jako mnohem mocn∞j╣φ zbra≥. Objekt s touto vlastnostφ je mo╛nΘ umφstit doslova kamkoliv. P°itom se okolnφ text chovß, jako by takovΘho objektu v∙bec nebylo. (Aneb je vyjmut z toku dokumentu.) Kdybych nap°φklad sem za tuto hv∞zdiΦku ** umφstil absolutn∞ pozicovanou druhou hv∞zdiΦku, v∙bec se to v tomto textu neprojevφ, ale zobrazφ se ·pln∞ jinde.
ZajφmavΘ efekty vzniknou r∙znou kombinacφ vlastnostφ left a top:
Jak jsem se doΦetl, v IE 4 je mo╛no absolutnφ pozici aplikovat pouze na tagy applet, button, div, fieldset, iframe, img, input, object, select, span, table a textarea. Tak╛e nap°φklad odstavec <p> nefunguje. V NN 4 a IE 5 funguje, ale stejn∞ jej tedy nelze pou╛φt, proto╛e v IE 4 by se to zobrazilo ╣patn∞. A jß nem∙╛u v∞d∞t, jak² prohlφ╛eΦ mß klient.
Proto╛e p°i p°esouvßnφ objekt∙ m∙╛e dojφt k p°ekryvu, existuje vlastnost urΦujφcφ, kter² objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot cel²ch Φφsel. P°itom vy╣╣φ Φφslo znamenß vy╣╣φ prioritu p°i p°ekr²vßnφ. Lze si to trochu p°edstavit jako t°etφ rozm∞r. Standardn∞ je to nula. Pokud nenφ z-index uveden nebo je u obou prvk∙ stejn², je navrchu ten prvek, kter² se v HTML zßpisu vyskytuje pozd∞ji. Nap°φklad
<span style="position: absolute; top: 0px; left: 0px; z-index:
-1"><img src=n∞co.gif ></span>
je obrßzek absolutn∞ umφst∞n² v rohu strßnky a v╣echen tamnφ text jej p°ekr²vß, proto╛e obrßzek mß nastaveno z-index: -1. Mimochodem, takto se dajφ tvo°it "pseudopozadφ". Z-index se d∞dφ do v╣ech vno°en²ch element∙.
V Netscape 4 se z-index ne v╛dy chovß sprßvn∞, ale neodhalil jsem ╛ßdnou zßkonitost chyby. V Internet Exploreru chybuje pouze tag <select>, kter² se v╛dy zobrazuje na vrchu (a mo╛nß je╣t∞ obΦas <object>).
Jak jsem uvedl, poΦßtek sou°adnicovΘho systΘmu pro absolutnφ pozicovßnφ je v∞t╣inou hornφ lev² roh strßnky. Co ale znamenß to v∞t╣inou? «e to m∙╛e b²t i jinak. V p°φpad∞, ╛e pozicovan² prvek (abs. Φi rel.) obsahuje druh² absolutn∞ pozicovan² prvek, bude ten druh² brßt poΦßtek sou°adnic podle hornφho levΘho rohu prvnφho prvku. Jin²mi slovy ka╛d² absolutn∞ Φi relativn∞ pozicovan² prvek definuje sou°adnicov² systΘm pro v╣echny absolutn∞ pozicovanΘ prvky, kterΘ obsahuje. Tato vlastnost je p°φjemnß a dajφ se s nφ d∞lat velmi psφ kusy.
Proto╛e n∞kterΘ prohlφ╛eΦe nepodporujφ CSS-P (Netscape 3, IE 3), je nutnΘ zadßvat absolutn∞ umφst∞nΘ objekty na alespo≥ trochu logickΘ mφsto, proto╛e v t∞chto prohlφ╛eΦφch se to zobrazφ normßln∞ v toku dokumentu. Zßrove≥ zd∙raz≥uji, ╛e se na pozicovßnφ nelze stoprocentn∞ spolehnout. N∞kdy je dobrΘ takovΘ elementy do k≤du dopsat a╛ skriptem podle typu prohlφ╛eΦe.
«el, musφm zmφnit, ╛e ani ty nejnov∞j╣φ prohlφ╛eΦe nepodporujφ CSS-P bezchybn∞. ⌐patn∞ je na tom zejmΘna Navigator 4, kter² sice samotnΘ pozicovßnφ z vlßdß dob°e, ale pak na strßnce d∞lß chyby v obtΘkan²ch objektech a n∞kterΘ oddφly prost∞ nezobrazφ, leda po zm∞n∞ velikosti okna. :-?
Zatφm jsem nezmφnil mo╛nß hlavnφ p°ednost pozicovßnφ: pomocφ skript∙ se dß s pozicovan²mi elementy h²bat tak, ╛e jim p°i°adφte jinou pozici. Nebudu zde rozebφrat zßludnosti JavaScriptu, jen pro zasv∞cen∞j╣φ vypφ╣u p°φkazy, kter²mi se dß poloha m∞nit.
Mßm-li pozicovan² element s ID (nap°φklad id="tygr"), potom pro IE 4 a 5 vypadß p°φkaz posunutφ elementu dol∙ o 20 px takto:
document.all.tygr.style.top += "20px",
Pro Netscape 4 a v∞t╣inu normßlnφch prohlφ╛eΦ∙:
document.tygr.top += "20px"
Vizte tΘ╛: sloupce pozicovßnφm, CSS styly, ·vod do CSS, CSS prakticky, p°ehled hodnot CSS, design pomocφ tabulek, simulace zßva╛φ na gum∞, p°φklad sloupcovΘ ·pravy
Obsah
Hledßnφ
Zßkladnφ kurs
Editory
HTML tipy
Provoz webu
CSS styly
Jak psßt web:
http://dusan.pc-slany.cz/internet/
Pφ╣e Yuh∙: autorova strßnka, mail: dusan@pc-slany.cz
Poslednφ aktualizace 26.11.2001
