#1 Pozice prvku
Způsobem, jakým se prvek na stránce nachází, konkrétně kde, lze ovlivnit vlastností position. Vlastnost position může mít 5 hodnot, z nichž všechny jsou klíčová slova:
- absolute
- fixed
- relative
- static
- sticky
S vlastností position se také pojí vlastnosti top, right, bottom a left, které reprezentují jednotlivé strany na webové stránce a umožňují nastavit vzdálenost, jak daleko se bude prvek od dané strany nacházet – obsluhují osy X a Y. O manipulaci na ose Z píšeme v dalším článku.
#2 Hodnoty vlastnosti
static
Hodnota static je základní hodnotou pro prvky; prvek není nijak speciálně umístěn a neplatí na něj vlastnosti stran. Hodnota dovoluje ostatním prvkům prvek obtékat, posouvat…, je lehce manipulovatelný a stránka ho vkládá za nebo před ostatní prvky podle HTML kódu.
Všechny prvky tak mají skrytou vlastnost:
* {
position: static;
}
relative
Prvek, kterému je přiřazena vlastnost position: relative; se nachází ve své přirozené pozici, ale mohou na něj být aplikovány vlastnosti stran (top, right, bottom a left), které ho z jeho přirozené pozice odchýlí, bez toho, aby se ostatní prvky přizpůsobily.
V tomto příkladu by byl za základních okolností (tj. žádné jiné styly se na prvek neaplikují) prvek vlevo nahoře. Poziční vlastnosti stran však přesouvají prvek 50 px shora a 30 px zprava – prvek se bude nacházet poblíž pravého horního rohu.
div {
position: relative;
height: 30px;
width: 70px;
top: 50px;
right: 30px;
}
absolute
Hodnota absolute prvek vyjme ze základního rozložení stránky a umístí ho doleva nahoru, případně podle nastavení pozičních vlastností stran. Na prvek se nevztahuje obtékání ani jiná forma rozložení; prvky mohou být pod nebo nad tímto prvkem.
#box {
position: absolute;
left: 100px;
top: 50px;
}
Zároveň se vztahuje hodnota absolute k nejbližšímu relativnímu rodiči – to znamená – v základu se jedná o dokument stránky (<body> je základní prvek, na který se vztahují pozice) nebo se může jednat o prvek, který má vlastnost position: relative; a je rodičem prvku s position: absolute;.
V následujícím příkladu se nachází HTML a CSS. Prvek <div> s identifikátorem #obal je nadřazeným prvkem prvku <p>. Prvek <p> má vlastnost position: absolute;, zatímco prvek #obal má position: relative;. Na stránce se tedy bude nacházet obal, ve kterém je obrázek a text, přičemž text bude v horním levém rohu prvku #obal, namísto svého přirozeného místa, jelikož se jeho pozice vztahuje k nadřazenému prvku.
<div id="obal">
<img src="obrazek.jpeg" alt="Obrázek">
<p>Odstavec textu</p>
</div>
#obal {
position: relative;
height: 300px;
width: 300px;
}
#obal p {
position: absolute;
top: 20px;
left: 20px;
}
fixed
Hodnota fixed funguje podobně jako hodnota absolute, akorát s rozdílem, že prvek s vlastností position: fixed; zůstane na daném místě i když uživatel scrolluje – prvek je umístěn vzhledem k obrazovce, nikoliv vzhledem k tělu stránky.
V následujícím příkladu se nachází prvek #info, který má definované poziční vlastnosti s vlastností position: fixed; – tento prvek bude viditelný uživateli na celé stránce, nehledě kolik uživatel scrolluje.
#info {
position: fixed;
top: 100px;
right: 50px;
}
sticky
Poslední hodnotou je hodnota sticky, která je mezi hodnotami relative a fixed, jelikož mění svoji pozici na základě scrollování. Prvek je ve spojí přirozené pozici dokud nenarazí na horní stranu obrazovky (případně níže pod hranou, podle stylizace), kdy se změní na připnutý prvek.
Tato vlastnost se často používá u navigací, které chceme, aby byly viditelné po celou dobu, ale splývaly s okolím.
/* Navigace, která se připne okamžitě */
nav {
position: sticky;
top: 0px;
}