Relatívne a absolútne poziciovanie v Cascading Style Sheets (CSS)

Tento článok popisuje rozdiel medzi position: absolute a relative poziciovaním pomocou CSS. I keď sa to zdá logické a jasné niektorý proste túto funkciu nepoužívajú správne.Position: relative umožňuje dve úžasné veci pri štýlovaní pomocou CSS a to:

• ak nastavíme nejakému obaľovaciemu elementu napríklad DIVu position: relative; zmeníme tým východzí bod pre ďalšie elementy umiestňované absolútne vo vnútri toho elementu
• ak nastavíme nejakému elementu (ktorý je vnorený napríklad do DIVu ktorý ale nemá nastavené position relative) tak vtedy môžete pohybovať relatívne s ľubovoľným elementom pomocou top, bottom, left, right

Zdá sa to zložité?

Asi sa to zdá zložité ale vôbec nieje, len sa to trochu blbo vysvetľuje ale skúsim to na obrázkoch.

Proste a jednoducho, keď dám niečomu position: absolute a napríklad top: 0; left: 0; tak sa to zobrazí v ľavom hornom rohu prehliadača. Ak ale element v ktorom mi používame toto position absolute má nastavený position: relative tak sa deje presne to isté ako o pár svoj vyššie ale element je umiestnený v ľavom hormon rohu toho elementu ktorý má definované práve to position relative. Tým position relative len zmeníme východzí bod pre umiestňovanie.

Čo sa stane keď dáte nejakému elementu position: absolute?

Odkazu nastavíte:

#mojdiv {
  background: red;
  /* tento kus kódu len vycentruje DIV a
  nastaví mu pevné rozmery */
  width: 300px;
  height: 100px;
  margin: 150px auto 0 auto;
}  

#mojodkaz {
<strong>  position: absolute;</strong>
  top: 0;
  left: 0;
  background: green;
}

Kde bude umiestnený odkaz?

Odkaz sa zobrazí v ľavom hornom rohu prehliadača a je jedno v akom DIVe je alebo ako hlboko je vnorený v kóde. Implicitne sa všetky elementy zobrazujú v ľavom hornom rohu prehliadača.

Čo robí position: relative?

Position: relative zmení východzí bod pre absolútne poziciovanie z ľavého horného rohu prehliadača na ľavý horný roh elementu ktorému definujete práve to position: relative. Elementy z predchádzajúceho príkladu by sa zobrazovali nejak takto ak by sme červenému DIVu definovali position: relative.

Okrem zmeny východzieho bodu môžete použiť position: relative aj na zmenu pozície elementu z jeho aktuálnej polohy. Pomocou top, left, right a bottom môžeme s elementom hýbať ľubovoľne z jeho aktuálnej pozície.

Podobné články

• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v CSS?
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 28. August 2008 -- Internet Explorer 6 je brzda internetu