Учебник по позиционированию в CSS

В CSS мы задаем расположение элемента с помощью свойства position.

Например:

.element {
  position: relative;
  top: 10px;
}

Позиция нашего элемента будет смещена вниз на 10px от верха относительно его исходного положения в документе.

Свойство position может иметь одно из 5 значений:

• static
• relative
• absolute
• fixed
• sticky

Давайте рассмотрим каждое из них!

Значения

Статический

Каждый элемент по умолчанию имеет статическое положение. Статические позиционированные элементы отображаются в обычном потоке страницы.

В качестве примера приведем следующий HTML:

<div class="parent">
  <p>parent</p>
  <div class="child">
     <p>child</p>
     <div class="element">
       <p>element</p>
     </div>
  </div>
</div>

И некоторые базовые CSS:

* {
  font-family: monospace;
  text-align: center;
  font-size: 24px;
}
.parent {
  background-color: red;
  padding: 40px;
  width: 500px;
  border: 2px solid #000;
}
.child {
  background-color: blue;
  padding: 30px;  
  border: 2px solid #000;
}
.element {
  background-color: green;
  padding: 30px;
  border: 2px solid #000;
}

Это дает нам следующее:

У нас есть макет по умолчанию static. Позицию static не нужно устанавливать, так как она предполагается.

Если мы попытаемся применить такие свойства, как top, bottom, left или right к статическому элементу, это не даст никакого эффекта.

Относительный

Элемент с позицией relative также останется в потоке документа, только теперь top, bottom, left & right будут работать!

Эти свойства (известные как свойства «смещения») перемещают элемент из исходного положения в указанном направлении.

Они принимают любое значение длины или процент.

Давайте добавим к нашему элементу position: relative & left со значением смещения 100px:

.element {
  /* other styles ... */
  position: relative;
  left: 100px;
}

Наш элемент переместится на 100px влево относительно своего контейнера.

Мы также можем задать несколько значений:

.element {
  /* other styles ... */
  position: relative;
  top: -200px;
  left: 100px;
}

Отрицательное значение для top перемещает бокс вверх относительно его контейнера.

Вы также заметите, что пространство, ранее занимаемое боксом element, все еще остается. Поскольку его позиция смещена относительно его первоначальной позиции.

Мы также можем применять z-индекс к относительно позиционированным элементам!

Абсолютный

Когда для элемента задана позиция absolute, он полностью исключается из потока документа. Это означает, что все остальные элементы страницы будут вести себя так, как будто его больше не существует.

Давайте зададим нашему элементу position: absolute, мы увидим, что его первоначальное пространство теперь уменьшилось, так как элемент существует вне потока документа.

.element {
  /* other styles ... */
  position: absolute;
}

Мы можем использовать позиционные свойства с элементом absolute. Таким образом, мы можем перемещать его с помощью top, right, bottom или left:

.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

Он будет позиционироваться в координатах 0,0 окна браузера (левый верхний угол).

Или:

.element {
  /* other styles ... */
  position: absolute;
  top: 250px;
  left: 100px;
}

Наши свойства смещения всегда устанавливают позицию относительно ближайшего контейнера, который не является статическим.

Если все родительские контейнеры статичны, он будет располагаться относительно окна.

Но если мы добавим position: relative к элементу .child и установим top и left в 0, элемент будет позиционирован в координатах 0, 0 элемента .child:

.child {
  /* other styles ... */
  position: relative;
}
.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

Это отличный трюк, который нужно запомнить при позиционировании элементов на странице!

Вы также можете использовать размещение z-index с абсолютным позиционированием.

Фиксированный

Элемент со значением fixed похож на абсолютный тем, что он также удален из потока документа.

Элемент с фиксированным позиционированием всегда располагается относительно самого окна, а не какого-либо конкретного родительского контейнера:

.element {
  /* other styles ... */
  position: fixed;
  top: 0;
  left: 0;
}

Кроме того, элементы fixed не подвержены влиянию прокрутки. Это означает, что его положение остается неизменным даже при прокрутке страницы.

Например, вы можете использовать элемент fixed для размещения иконки «прокрутки к началу» в правом нижнем углу страницы!

Липкий

Значение sticky является гибридом значений relative и fixed. Оно рассматривается как относительное значение, пока местоположение прокрутки (области просмотра) не достигнет определенного порога. В этот момент он «прилипает» на место, действуя как элемент fixed.

Вам может понадобиться изображение посадочной страницы с навигационным меню, расположенным под ней. Когда вы прокручиваете страницу вниз после изображения посадочной страницы, меню может «прилипать» к верхней части окна.

Например:

.element {
  position: sticky; 
  top: 0;
}

Наш элемент будет располагаться относительно, пока его не достигнет место прокрутки области просмотра. Затем он прилипнет к странице в фиксированной позиции в верхней (0) части экрана.

На данном этапе sticky остается экспериментальным значением, с лишь частичным принятием основными браузерами.

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen