CSS Position Ultimate Guide 2022.


Запутались в CSS Position…?

В этой статье я разберу все свойства CSS position и объясню все, что вам нужно знать о них. Сюда входят даже самые непонятные концепции, связанные с позицией, которые игнорируются в большинстве статей/видео.

Необходимые условия

Чтобы извлечь максимальную пользу из этой статьи, нам понадобится следующее:

  • Базовое понимание HTML.
  • Базовое понимание CSS. (ознакомьтесь с CSS Selctors)
  • Visual studio code или любая другая IDE по нашему выбору для написания кода.

Позиции CSS

При создании веб-страницы на ней может быть множество элементов, каждый из которых имеет свое положение, назначение и дизайн. Важно знать, как мы можем расположить эти элементы и контролировать их расположение.

Свойство position в CSS определяет, как элемент позиционируется в документе. Оно задает тип метода позиционирования для каждого элемента.


Значения CSS Positions

Свойство position может иметь любое из этих значений:

  • static
  • абсолютный
  • относительный
  • фиксированный
  • липкий

Вы также можете указать значение inherit, что означает, что значение определяется от родительского элемента. Значение позиции не каскадируется, поэтому это можно использовать, чтобы специально заставить его и унаследовать значение позиционирования от родительского элемента.


Свойства позиционирования

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

Но нам также необходимо определить, где именно должен быть размещен элемент, а не только как. Для этого можно использовать несколько свойств.

  • top
  • левый
  • правый
  • низ
  • z-index

Они определяют, насколько и в каком направлении должна изменяться позиция элемента.


Обычный поток

Прежде чем перейти к деталям, давайте посмотрим, как эти элементы автоматически получают свое положение на вашей странице. Чтобы понять это, необходимо разобраться в нормальном потоке веб-страницы. Нормальный поток — это то, как элементы расположены на странице, если вы не меняли их расположение.

На веб-странице есть два типа элементов. Элементы блочного уровня и встроенные элементы.

Элементы блочного уровня, такие как <h1>, <div>, <p>, располагаются на отдельной строке. Поскольку элементы блочного уровня начинаются с переноса строки, два элемента блочного уровня не могут существовать на одной строке без стилизации.

Инлайн-элементы, такие как <a>, <img>, <span>, не образуют собственных блоков. Вместо этого они отображаются в строках. Они выстраиваются рядом друг с другом по горизонтали; когда в строке остается недостаточно места, содержимое перемещается на новую строку.


Статическая позиция

position: static — это значение по умолчанию, предоставляемое HTML. Это означает, что если мы не объявляем позицию для элемента в CSS, то она автоматически будет установлена как статическая.

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

Элементы, которые позиционируются статически, будут следовать нормальному потоку документа и позиционироваться на основе стандартных правил позиционирования.

В отличие от других значений позиции, при использовании static такие свойства размещения, как top, left, bottom, right, или z-index не имеют никакого эффекта.

Пример, иллюстрирующий статическое положение:

Мы используем следующую HTML-разметку:

<div class="parent">
    Parent
    <div class="one">
      One <br>
      position:static <br>
      top: 50px ( this has no effect )
   </div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.parent { 
   // No position set, so it's static 
} 
.one { 
   // No position set, so it's static 
   top: 50px; 
}
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как это будет выглядеть на веб-странице:

Просмотр исходного кода в CodePen

Поскольку оба элемента имеют статическое положение, ни одно из свойств CSS макета ничего не сделает. Поэтому свойство top не влияет на отображение элемента с class=»one».


Относительная позиция

Относительная позиция означает, что элемент размещается относительно его исходной позиции на странице. Элемент relative position работает точно так же, как и static position, но теперь вы можете добавить к нему свойства z-index, top, left, right и bottom.

Если вы сделаете элемент relative позиционированным без установки каких-либо дополнительных свойств, вы заметите, что он выглядит точно так же, как и статически позиционированный элемент. Это происходит потому, что relative позиционированные элементы также следуют обычному потоку документа, но вы можете смещать их с помощью свойств top, left, right и bottom.

Пример, иллюстрирующий относительное положение:

Мы используем следующую HTML-разметку:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.one {
  position: relative;
  top: 15px;
  left: 15px;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Однако вот как это будет выглядеть на веб-странице:

Просмотр исходного кода в Codepen

В результате перемещения элемента из исходного положения может возникнуть ситуация, когда несколько элементов перекрывают друг друга. К счастью, с помощью свойства z-index можно контролировать, какие элементы должны быть впереди, а какие сзади. Мы обсудим это более подробно позже.

Только позиция relative не так полезна, так как обычно вы не хотите смещать элемент, не перемещая при этом все элементы вокруг него. Основные случаи использования позиции relative — это либо установка z-index элемента, либо использование в качестве контейнера для absolute позиционированных элементов, о которых мы поговорим далее.


Абсолютное позиционирование

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

Элемент, использующий position: absolute, позиционируется относительно ближайшего предка. Другими словами, элемент с position: absolute позиционируется относительно своего родительского элемента.

Если у элемента нет родительского элемента, он позиционируется относительно своего начального содержащего блока. Затем он может быть позиционирован по значениям top, right, bottom и left.

Примечание: Если мы не указываем вспомогательные свойства, элемент автоматически позиционируется относительно начальной точки (левого верхнего угла) его родительского элемента.

Пример, иллюстрирующий абсолютное положение:

Мы используем следующую HTML-разметку:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.parent {
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  right: 0;
}
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen

Установив для синего родительского элемента позицию relative, я вынуждаю абсолютно позиционированный дочерний элемент one находиться в правом верхнем углу родительского элемента, а не в теле. Такое сочетание относительной и абсолютной позиции встречается очень часто.


Фиксированная позиция

Позиция fixed немного похожа на позицию absolute в том, что она выводит элемент из обычного потока, но элементы с позицией fixed всегда располагаются в одном и том же месте в области просмотра (то, что видно на экране). Это означает, что прокрутка никак не повлияет на его положение.

Пример, иллюстрирующий фиксированную позицию:

Мы используем следующую HTML-разметку:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       Ha ha! Scrolling can't get rid of me!!
    </div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.two {
  position: fixed;
  top: 0;
  right: 0;
}
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen

Розовый фиксированный элемент будет оставаться в верхнем и правом углу области просмотра. При прокрутке родительский элемент синего цвета и другие дочерние элементы будут нормально прокручиваться вверх, но розовый элемент останется в том месте, где мы его расположили.

Совет: У фиксированного элемента должна быть задана верхняя или нижняя позиция. В противном случае он просто не будет существовать на странице.

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


Липкая позиция

Позиция sticky представляет собой комбинацию fixed и relative и сочетает в себе лучшее из них обоих.

Элемент с позицией sticky будет вести себя как элемент с позицией relative, пока страница не прокрутится до точки, где элемент попадет в указанное значение top, left, right или bottom. Тогда он будет действовать как элемент с фиксированной позицией и прокручиваться вместе со страницей, пока элемент не достигнет конца своего контейнера.

Другими словами, элементы, установленные с помощью position: sticky, позиционируются на основе позиции прокрутки пользователя.

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

Пример для иллюстрации Sticky Position :

Мы используем следующую разметку HTML:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.two {
  position: sticky;
  top: 0;
}
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen

Положение sticky — идеальное положение для навигационных панелей, которые прокручиваются вместе со страницей, заголовков в длинных списках и многих других случаев использования.


Z-index

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

Здесь на помощь приходит свойство z-index. Когда элементы накладываются друг на друга, мы используем z-index для их укладки. Оно управляет положением элементов по оси z.

Вы можете использовать z-index следующим образом:

 z-index: 1;
Войти в полноэкранный режим Выйти из полноэкранного режима

z-index дает вам возможность решать, как элементы должны перекрывать друг друга, в каком порядке. Если вы зададите более высокое значение z-index, то данный элемент будет располагаться ближе к зрителю. Другими словами, он будет отображаться поверх других элементов.

Пример, иллюстрирующий Z-индекс:

Мы используем следующую HTML-разметку:

<div class="parent">
    Parent
    <div class="one">One</div>
    <div class="two">
       Two <br>
       I stick at the top <br><br>
       position: sticky <br>
       top: 0px;
    </div>
    <div class="three">Three</div>
</div>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот CSS, который мы используем:

.first{
  z-index: 3;
}

.second{
  z-index: 2;
}

.third{
  z-index: 1;
}

.four{
  /* No z-index */
}

.fifth{
  z-index: -1;
}
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как это будет выглядеть на веб-странице:

Посмотреть оригинальный код в Codepen


Резюме

Подведем итоги. Свойство position позволяет определить, как элементы должны быть размещены на странице.

Вы можете определить точное расположение с помощью свойств top, bottom, right и left.

Если ваши элементы перекрывают друг друга, вы можете изменить их порядок, используя z-index. Чем выше индекс, тем ближе элемент к пользователю.

static

  • Значение по умолчанию
  • Позиционирование как обычно, как если бы вы не указали position

relative

  • Элемент размещается относительно своего обычного положения на странице
  • Место, занимаемое элементом, сохраняется в его исходном положении

абсолютный

  • Элемент удаляется из нормального потока и не занимает места
  • Местоположение определяется относительно позиции первого родителя (кроме static).
  • Если такого родителя нет, то определяется относительно всей страницы.

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

  • Элемент удален из обычного потока и не занимает места
  • Расположение определяется относительно области просмотра
  • Элементы сохраняют свое расположение при прокрутке

липкий

  • Элементы располагаются относительно друг друга, пока вы не достигнете их при прокрутке.
  • Затем элементы придерживаются одного местоположения, аналогично фиксированному позиционированию.
  • Поддерживается не всеми браузерами, вы можете ознакомиться с текущей поддержкой на CanIUse.com.

В заключение

Я надеюсь, что вы нашли это руководство и примеры кода по позиционированию CSS полезными…! Если у вас есть какие-либо вопросы или пожелания, не стесняйтесь оставить комментарий ниже.

Если вы нашли эту статью полезной, пожалуйста, поставьте лайк и поделитесь ею 💙.

На сегодня это все! 😁 Вы дошли до конца статьи 😍.

Другие ресурсы

Ознакомьтесь с некоторыми из этих ресурсов для более детального изучения CSS Positions:

  • MDN CSS Positions
  • WDS CSS Positions
  • CSS Positions

Хотите больше…?

Я пишу статьи о веб-разработке в своем блоге @dev.to/kadlagakash, а также размещаю материалы, связанные с разработкой, на следующих платформах:

  • Twitter

  • LinkedIn

Оцените статью
devanswers.ru
Добавить комментарий