Как использовать свойство position в CSS для выравнивания элементов

kak ispolzovat svojstvo position v css dlya vyravnivaniya elementov

Позиционировать элементы с помощью CSS в веб-разработке не так просто, как кажется. Все может быстро усложниться, поскольку ваш проект становится больше, и без хорошего понимания того, как CSS работает с выравниванием элементов HTML, вы не сможете решить проблемы с выравниванием.

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

В этой статье я объясню один из самых запутанных способов выравнивания элементов с помощью чистого CSS: свойство положения. У меня также есть еще одно руководство по CSS Display Property.

Если хотите, вы можете просмотреть видеоверсию учебника по позиционированию CSS:

Давайте начнем…

Позиция CSS и свойства вспомогательных средств

Итак, существует 5 основных значений Позиция Собственность:

position: static | relative | absolute | fixed | sticky

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

top | right | bottom | left И z-index

Важное примечание: Вспомогательные свойства не работают без объявленной позиции или с положение: статическое.

Что это за z-индекс?

У нас есть высота и ширина (x, y) как 2 измерения. Z – 3-е измерение. Элемент на веб-странице стоит перед другими элементами, как его z-index значение увеличивается.

Z-индекс не работает с position: static или без объявленной должности.

1*Dc7075K8xmYZQAqn6BaJPg
Элементы упорядочиваются сзади вперед, как их z-индекс увеличить

Вы можете посмотреть видео на моем канале, чтобы узнать, как пользоваться z-индекс подробнее:

Теперь перейдем к позицию собственность ценности

1. Статические

position: static есть значение по умолчанию. Независимо от того, объявляем мы это или нет, элементы размещаются на веб-странице в обычном порядке. Приведем пример:

Сначала мы определяем нашу структуру HTML:

<body>
  <div class="box-orange"></div>
  <div class="box-blue"></div>
</body>

Затем мы создаем 2 поля и определяем их ширину, высоту и положение:

.box-orange {          // without any position declaration
  background: orange;
  height: 100px;
  width: 100px;       
}

.box-blue {
  background: lightskyblue;
  height: 100px;
  width: 100px; 
  position: static;   // Declared as static
}
1*atA27-7dzI4wKkg_HfAtLw
тот же результат с и без положение: статическое

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

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

position: relative: Новое положение элемента относительно его нормального положения.

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

Давайте переместим оранжевый ящик рядом с синим.

.box-orange {
  position: relative;  // We are now ready to move the element
  background: orange;
  width: 100px;
  height: 100px;
  top: 100px;         // 100px from top relative to its old position
  left: 100px;        // 100px from left
}
1*noqTpZ-EBTftlKdFi48Iiw
Оранжевое поле перемещается на 100 пикселей вниз и вправо относительно его нормального положения.

ПРИМЕЧАНИЕ. Использование положение: относительное для элемента, не влияющего на положение других элементов.

3. Абсолютный

в position: relativeэлемент размещен относительно себя. Однако, an абсолютныйly размещенный элемент есть в отношении своего отца.

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

Так как position: absolute удаляет элемент из документооборота, другие элементы испытывают влияние и вести себя так, как элемент полностью удален с веб-страницы.

Добавим а контейнер как родительский элемент:

<body>
  <div class="container">
    <div class="box-orange"></div>
    <div class="box-blue"></div>
  </div>
</body>
.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
}
1*C15mDxOdtFLkXLcFaVRYBQ
положение: абсолютное переносит элемент в начало своего отца

Теперь кажется, что синяя коробка исчезла, но нет. Синее поле ведет себя так, будто оранжевая коробка удалена, поэтому она смещается вверх на место оранжевой коробки.

Давайте переместим оранжевое поле на 5 пикселей:

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  left: 5px;
  top: 5px;
}
1*ss6uEQz9Bbdrdst8kNiHqQ
Теперь мы видим синюю коробку

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

.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}
1*AEX5fn8t0MJZCo4Lx52Uaw

4. Исправлено

Люблю position: absoluteфиксированные позиционированные элементы также удаляются из обычного документооборота. Различия:

  • Они есть только в отношении документа , не какие-либо другие родители.
  • Они есть не влияет на прокрутку.
.container {
  position: relative;
  background: lightgray;
}

.box-orange {
  position: fixed;
  background: orange;
  width: 100px;
  height: 100px;
  right: 5px;    // 5px relative to the most-right of parent
}

Здесь в примере я изменю позицию оранжевого поля на фиксированныйи на этот раз это относительно 5 пикселей справа от а не его родительский (контейнер):

Как видим, прокрутка страницы не влияет на фиксированный размещена коробка. Он больше не относится к своему отцу (контейнеру).

5. Липкий

position: sticky можно объяснить как смесь position: relative и position: fixed.

Он ведет себя к объявленной точке как position: relativeпосле этого он изменяет свое поведение на position: fixed . Лучший способ объяснить положение: липкое есть на примере:

ВАЖНО: Position Sticky не поддерживается в Internet Explorer и в предыдущих версиях других браузеров. Вы можете проверить поддержку браузера caniuse.com.

Экран-Ресми-2019-10-04-23.09.24
Поддержка браузера для Position: sticky

Лучший способ понять свойство CSS Position – это практика. Продолжайте кодировать, пока не получите лучшее понимание. Если что-то непонятно, я отвечу на вопросы ниже в разделе комментариев.

Если вы хотите узнать больше о веб-разработке, не стесняйтесь следите за мной на Youtube!

Спасибо, что читаете!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *