Pozícia elementu

04.04.2011 21:27

Na určenie pozície daného objektu budeme používať dve vlastnosti: position a z-index.

Position

V prípade vlastnosti position máme nasledovné možné hodnoty:

  • static - normálna pozícia objektu, netreba určiť žiadne ďalšie hodnoty;
  • absolute - absolútne umiestnenie vzhľadom na ľavý horný roh okna prehliadača, potrebujeme nastaviť niektoré z ďalších hodnôt vlastností top, left, right, bottom;
  • relative - relatívne umiestnenie vzhľadom na obmedzujúci prvok, potrebujeme nastaviť niektoré z ďalších hodnôt vlastností top, left, right, bottom;
  • fixed - fixovanie pozície, pri scrollovaní stránky zostáva objekt stále na tej istej pozícii, neposúva sa

Najlepšie opäť pochopíte na príkladoch, na ktorých si preveríte, ako táto vlastnosť funguje.

Príklad použitia absolute:


<div style="width:500px;height:300px;background:red;margin:50px auto;">
  <div style="position:absolute;top:10px;left:10px;width:50px;height:30px;background:green;">absolute
  </div>
</div>
Výsledok:

Príklad použitia relative:

<div style="width:500px;height:300px;background:red;margin:50px auto;">
  <div style="position:relative;top:10px;left:10px;width:50px;height:30px;background:green;">relative
  </div>
</div>
Výsledok:

Príklad použitia fixed:

<div style="width:500px;background:red;margin:50px auto;">
  <div style="position:fixed;top:10px;left:10px;width:50px;height:30px;background:green;">fixed
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>

Skúste sa posunúť na koniec stránky, postrehli ste fixovanie pozície?

Výsledok:

z-index

Pomocou tejto vlastnosti nastavujeme prekrývanie objektov. Nastavujeme ju pre objekty s určenou pozíciou.

Vyskúšajte si jednotlivo nasledovné jednoduché príklady:

Príklad, kde zelený objekt je za červeným:


<div style="position:absolute;top:10px;left:10px;width:50px;height:30px;background:red;z-index:1;">
</div>
<div style="position:absolute;top:15px;left:30px;width:50px;height:30px;background:green;">
</div>
Výsledok:

Príklad, kde červený objekt je za zeleným:


<div style="position:absolute;top:10px;left:10px;width:50px;height:30px;background:red;z-index:-1;">
</div>
<div style="position:absolute;top:15px;left:30px;width:50px;height:30px;background:green;">
</div>
Výsledok:

Úloha:

Vytvorte si niekoľko objektov, vzájomne vnorených aj nie a pohrajte sa s nastavením pozície a prekrývania.

A teraz poďme vytvoriť jednoduchý web.

—————

Späť

Novinky

Vytvorme jednoduchý web - HTML&CSS

05.04.2011 05:45
V rubrike HTML & CSS sa oboznámite so základmi tvorby webových stránok, pričom budeme využívať jazyk XHTML a...

—————

Spustili sme webovú prezentáciu o tvorbe webu

01.04.2011 10:25
Webová stránka o tvorbe webových stránok. Znie to krkolomne, pravda? Aj ja si to myslím, ale keď som začínal s tvorbou...

—————

Všetky články

—————

Tvorba web stránok zdarma Webnode