Poziționarea CSS
Poziționarea CSS controlează unde sunt plasate elementele pe o pagină. Cu ajutorul ei, poți suprascrie fluxul normal al documentului.
Proprietatea CSS position
Proprietatea position setează tipul de poziționare al unui element. Poate avea aceste valori:
static— valoarea implicită. Elementul urmează fluxul normal al documentului.relative— elementul este plasat relativ la poziția sa normală.fixed— elementul este plasat relativ la fereastra de vizualizare (viewport).absolute— elementul este plasat relativ la cel mai apropiat ancestor poziționat.sticky— elementul comută între relative și fixed în funcție de poziția de derulare.
Elementele sunt apoi mutate în poziția lor finală cu proprietățile top, bottom, left și right.
CSS position: static
Toate elementele HTML sunt static implicit. Un element static nu este afectat de proprietățile top, bottom, left și right și urmează mereu fluxul normal al paginii.
Exemplu
Div-ul folosește position: static și rămâne în fluxul normal.
<style>, dă unei clase div.static position static și un border verde solid de 3px. Adaugă un div care o folosește. Un element static urmează fluxul normal al paginii.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="static">This div has position: static. It follows the normal flow of the page.</div>
</body>
</html>
CSS position: relative
Un element relative este plasat relativ la poziția sa normală. Setarea top, right, bottom sau left îl mută din acel loc. Spațiul lăsat în urmă nu este umplut de alt conținut.
Exemplu
Div-ul este mutat cu 30px la dreapta față de poziția sa normală.
<style>, dă unei clase div.relative position relative, left 30px și un border verde solid de 3px. Adaugă un div care o folosește. Acesta se mută cu 30px la dreapta față de poziția sa normală.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<div class="relative">This div has position: relative and is moved 30px to the right of its normal position.</div>
</body>
</html>