CSS position: fixed
Un element fixed este plasat relativ la fereastra de vizualizare (viewport), astfel încât rămâne în același loc chiar și atunci când pagina este derulată. Poziția sa finală este setată cu top, right, bottom și left.
Un element fixed nu lasă un gol în locul în care s-ar fi aflat în mod normal.
Exemplu
Div-ul fixed stă în colțul din dreapta jos și rămâne acolo pe măsură ce derulezi.
<style>, dă unei clase div.fixed position fixed, bottom 0, right 0, width 300px și un border verde solid de 3px. Adaugă un div fixed în colțul din dreapta jos și suficient conținut pentru a derula pagina, astfel încât elementul fixed să rămână pe loc.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: fixed</h2>
<p>Scroll the page. The fixed element stays in the lower-right corner.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<div class="fixed">This div has position: fixed.</div>
</body>
</html>
CSS position: absolute
Un element absolute este plasat relativ la cel mai apropiat ancestor poziționat (unul cu o poziție diferită de static). Dacă nu există un ancestor poziționat, elementul folosește corpul documentului și se mișcă odată cu derularea paginii.
Notă: Elementele absolute sunt eliminate din fluxul normal și se pot suprapune cu alte elemente.
Exemplu
Div-ul absolute este plasat relativ la părintele său cu position relative.
<style>, creează un div.relative părinte cu position relative, o lățime, o înălțime și un border verde; și un div.absolute copil cu position absolute, top 80px, right 0, o lățime și înălțime mai mici, și un border roșu. Imbrichează div-ul absolute în interiorul celui relative, astfel încât să fie plasat relativ la părinte.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid green;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="relative">This div has position: relative.
<div class="absolute">This div has position: absolute, placed relative to the parent.</div>
</div>
</body>
</html>
Poziționarea textului peste o imagine
Poți folosi de asemenea poziționarea pentru a plasa text peste o imagine, în puncte precum stânga sus, dreapta sus, stânga jos, dreapta jos sau centru. PromptCookbook trimite către un exemplu complet pentru fiecare poziție.