Свойство CSS position

Как работать с`position`свойство в CSS

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

Вы можете перемещать элементы и размещать их там, где хотите.

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

У нас есть одно основное свойство CSS:position.

Он может иметь следующие 5 значений:

static
relative
absolute
fixed
sticky

Статическое позиционирование

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

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

Если вы установитеposition: relativeна элементе, теперь вы можете позиционировать его со смещением, используя свойства

верх
верно
Нижний
оставили

которые называютсясвойства смещения. Они принимают значение длины или процент.

Братьэтот пример я сделал на Codepen. Я создаю родительский контейнер, дочерний контейнер и внутреннее поле с некоторым текстом:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>Test</p>
    </div>
  </div>
</div>

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

.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
}
.child {
background-color: #ff4797;
padding: 30px;
}
.box {
background-color: #f3ff47;
padding: 30px;
border: 2px dotted #333;
font-family: courier;
text-align: center;
font-size: 2rem;
}

вот результат:

Вы можете попробовать добавить любое из свойств, о которых я упоминал ранее (top,right,bottom,left) к.box, и ничего не произойдет. Позицияstatic.

Теперь, если мы установимposition: relativeдо коробки, сначала видимо ничего не меняется. Но теперь элемент может перемещаться с помощьюtop,right,bottom,leftproperties, и теперь вы можете изменить его положение относительно содержащего его элемента.

Например:

.box {
  /* ... */
  position: relative;
  top: -60px;
}

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

Или же

.box {
  /* ... */
  position: relative;
  top: -60px;
  left: 180px;
}

Обратите внимание, как пространство, занимаемое коробкой, остается в контейнере, как будто оно все еще было на своем месте.

Еще одно свойство, которое теперь будет работать, этоz-index, чтобы изменить размещение оси Z. Об этом поговорим позже.

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

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

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

При абсолютном позиционировании, как только мы установимposition: absoluteна.box, его исходное пространство теперь свернуто, и только начало координат (координаты x, y) осталось прежним.

.box {
  /* ... */
  position: absolute;
}

Теперь мы можем перемещать рамку по своему усмотрению, используяtop,right,bottom,leftхарактеристики:

.box {
  /* ... */
  position: absolute;
  top: 0px;
  left: 0px;
}

или же

.box {
  /* ... */
  position: absolute;
  top: 140px;
  left: 50px;
}

Координаты указаны относительно ближайшего контейнера, который неstatic.

Это означает, что если мы добавимposition: relativeк.childэлемент, и мы устанавливаемtopиleftзначение 0, поле не будет располагаться в верхнем левом полеокно, а скорее он будет расположен в координатах 0, 0.child:

.child {
  /* ... */
  position: relative;
}
.box {
/* … */
position: absolute;
top: 0px;
left: 0px;
}

Вот (как мы уже видели).childстатичен (по умолчанию):

.child {
  /* ... */
  position: static;
}
.box {
/* … */
position: absolute;
top: 0px;
left: 0px;
}

Как и для относительного позиционирования, вы можете использоватьz-index, чтобы изменить размещение оси Z.

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

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

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

.box {
  /* ... */
  position: fixed;
}

.box {
  /* ... */
  position: fixed;
  top: 0;
  left: 0;
}

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

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

Хотя указанные выше значения существуют уже очень давно, это было введено недавно и до сих пор относительно не поддерживается (см. caniuse.com)

Компонент UITableView iOS - это то, что приходит на ум, когда я думаю оposition: sticky. Вы знаете, когда вы прокручиваете список контактов и первая буква наклеивается вверх, чтобы вы знали, что просматриваете контакты этой конкретной буквы?

Мы использовали JavaScript, чтобы имитировать это, но это подход, принятый CSS, чтобы разрешить это изначально.

Скачать мою бесплатнуюСправочник CSS