Proprietatea position

Proprietatea position definește modul de poziționare a elementelor. Această proprietate este cel mai des folosită împreună cu proprietățile top, right, bottom, left, care stabilesc spațiile de sus, dreapta, jos, stânga respectiv.

Sintaxă

selector {
	position: absolute | relative | fixed | static | sticky;
}

Valori pentru position

Valoare	Descriere
`absolute`	Poziționare absolută. Elementul este eliminat din fluxul normal al documentului și poziționat față de cel mai apropiat strămoș poziționat (dacă există) sau față de fereastra browserului.
`relative`	Poziționare relativă. Elementul este deplasat față de poziția sa normală în fluxul documentului, dar spațiul pe care îl ocupa rămâne rezervat.
`fixed`	Poziționare fixă. Elementul este eliminat din fluxul normal al documentului și poziționat față de fereastra browserului. Rămâne pe loc la derularea paginii.
`static`	Poziționare statică. Valoarea înseamnă absența poziționării și elementul se comportă normal.
`sticky`	Poziționare lipicioasă. Elementul se comportă ca `relative` până când atinge poziția stabilită la derulare, după care se lipește de locul indicat (ca `fixed`).

Valoare implicită: static.

Exemplu . Poziționare absolută

Să poziționăm elementul în colțul din stânga sus al ecranului cu mici spații:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplu . Poziționare absolută

Și acum să poziționăm elementul în colțul din dreapta sus al ecranului cu mici spații:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplu . Poziționare fixă

Cu poziționarea fixă elementul va rămâne pe loc la derulare:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Exemplu . Poziționare relativă

Cu poziționarea relativă elementul este deplasat față de poziția sa normală, dar celelalte elemente se comportă ca și cum elementul nu s-ar fi deplasat:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Exemplu . Îmbricare

Dacă părintele are proprietatea position cu valoarea relative, atunci elementele poziționate absolut se vor poziționa față de părinte:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplu . Îmbricare

Dacă părintele are proprietatea position cu valoarea absolute, atunci elementele poziționate absolut se vor poziționa față de părinte:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplu . Poziționare lipicioasă

Dacă pentru element proprietatea position are valoarea sticky, atunci elementul se comportă ca relative până când atinge poziția stabilită la derulare, după care se lipește de loc. Să facem un header lipicios:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Exemplu . Fără poziție

Dacă elementului i se dă o poziționare absolută fără a specifica poziția, atunci elementul va rămâne în locul, în care se afla fără poziționare, dar celelalte elemente nu îl vor mai observa:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplu . O axă

Cu poziționarea absolută se poate specifica poziția doar pe o axă. de exemplu, dacă specificăm proprietatea top, atunci pe verticală elementul se va poziționa corect, iar pe orizontală va rămâne în locul, în care se afla:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Exemplu . Toate pozițiile

Cu poziționarea absolută se pot specifica pozițiile din toate părțile, fără a specifica lățimea și înălțimea. În acest caz elementul se va poziționa în centrul blocului părinte:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Vezi și

proprietatea z-index,
care specifică suprapunerea elementelor