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ă

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

Valori pentru position

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:

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

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

css.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:

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

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

css.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:

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

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

css.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:

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

css.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:

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

css.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:

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

css.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:

html<h1>Main Site Header</h1>

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

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

cssh1 {
  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:

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

css.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:

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

css.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:

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

css.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