Свойство position

Свойство position задава метода на позициониране на елементи. Това свойство най-често се използва заедно със свойствата top, right, bottom, left, които задават отстъпи отгоре, отдясно, отдолу, отляво съответно.

Синтаксис

cssселектор {
  position: absolute | relative | fixed | static | sticky;
}

Стойности за position

Стойност по подразбиране: static.

Пример . Абсолютно позициониране

Разположим елемент в горния ляв ъгъл на екрана с малки отстъпи:

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;
}

Результат:

Пример . Абсолютно позициониране

А сега разположим елемент в горния десен ъгъл на екрана с малки отстъпи:

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;
}

Результат:

Пример . Фиксирано позициониране

При фиксирано позициониране елементът ще остава на място при превъртане:

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;
}

Результат:

Пример . Относително позициониране

При относително позициониране елементът се измества спрямо нормалната си позиция, но останалите елементи се държат така, сякаш елементът не е изместен:

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;
}

Результат:

Пример . Влагане

Ако родителят има свойство position със стойност relative, то абсолютно позиционираните елементи ще се позиционират спрямо родителя:

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;
}

Результат:

Пример . Влагане

Ако родителят има свойство position със стойност absolute, то абсолютно позиционираните елементи ще се позиционират спрямо родителя:

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;
}

Результат:

Пример . Лепкаво позициониране

Ако за елемент свойството position има стойност sticky, то елементът се държи като relative, докато не достигне зададената позиция при превъртане, след което се залепва за мястото. Нека направим лепкаво заглавне:

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;
}

Результат:

Пример . Без позиция

Ако на елемент се зададе абсолютно позициониране без указание на позиция, то елементът ще остане да стои на мястото, където е стоял без позициониране, но останалите елементи ще престанат да го забелязват:

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;
}

Результат:

Пример . Една ос

При абсолютно позициониране може да се зададе позиция само по една ос. Например, ако зададем свойство top, то по вертикала елементът ще заеме желаната позиция, а по хоризонтала ще остане да стои, там, където е стоял:

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;
}

Результат:

Пример . Всички позиции

При абсолютно позициониране може да се зададат позиции от всички страни, без да се задава ширина и височина. В този случай елементът ще се позиционира в центъра на родителския блок:

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;
}

Результат:

Вижте също