Свойство 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;
}

Результат:

Смотрите также