CSS pozíciovanie - AKO NA WEB

CSS pozíciovanie

Position alebo pozíciovanie v CSS je na tagoch by default (predvolene) nastavené na static.
Pokiaľ chceš v rámci nejakého boxu umiestniť absolutne nejaký iný box, musíš rodičovi nastaviť relative a potomkovi absolute.


Príklad -  2 boxy, kde do väčšieho vložím menší a nastavím mu pozíciu zhora a zľava:

<div style="width: 400px; height: 300px; background-color: red; position: relative;">
  <div style="width: 100px; height: 100px; background-color: blue; position: absolute; top: 50px; left: 100px;">Box umiestnený absolútne</div>
</div>

Tu je použitie v JSFiddle.net:
..:: otvoriť ::..

Výsledok:

CSS pozíciovanie

P.S.:
1. pozíciovať môžeš buď zhora (top) alebo zdola (bottom) a zľava (left) alebo zprava (right).
2. pozíciovanie fixne sa používa napr. na odkazy FB, G+ a podobne, ktoré po scroll-ovaní ostávajú stále viditeľné na rovnakom mieste - position: fixed;