position
Vlastnost position specifikuje jak daný element bude pozicován
Může nabývat několika hodnot:
- static - defaultní hodnota - element se vyrenderuje v normálním pořadí podle toku dokumentu
- absolute - element je relativně pozicován k prvnímu předešlému non-static elementu
- fixed - element je relativně pozicován k oknu prohlížeče
- relative - element je relativě pozicován k normální pozici
- sticky - element je pozicován podle uživatelského scrollování - přepíná mezi hodnotou relative a fixed podle scroll pozice
- intial - nastaví position na defaultní hodnotu
- inherit - zdědí hodnotu od rodičovského elementu
Editor
Pro živou ukázku je CSS a JavaScript vepsaný přímo v dokumentu - v praxi tyto soubory vždy oddělujte do externích souborů
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 200vh;
}
.div1 {
width: 200px;
height: 600px;
position: relative;
border: 1px solid black;
}
.div2 {
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
border: 1px solid red;
}
.div3 {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
border: 1px solid green;
}
.div4 {
width: 200px;
height: 200px;
position: sticky;
top: 150px;
left: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
relative
<div class="div2">
absolute
</div>
</div>
<div class="div3">
fixed
</div>
<div class="div4">
sticky
</div>
</body>
</html>