Позиционирование

Всем самый добрый день!

Сегодня я хочу с Вами поговорить о такой интересной теме как “позиционирование”. Новичкам бывает трудно вникнуть в само это понятие.
Позиционирование задается правилом position, в котором указывается одно из нескольких значений.

Значением по умолчанию является - static. Если нас оно устраивает, то правило position: static; мы писать не должны.

Запись на скриншоте сверху равноценна записи на скриншоте ниже.

Однако, если по какой-то причине нам нужно отличное от static позиционирование, мы будем вынуждены прописать правило position и указать требуемое нам значение.

Итак, какие они бывают помимо static:

• Relative
• Absolute
• Fixed
• Sticky

Разберем каждое из них.

1. Position: relative; - свой среди чужих, чужой среди своих.

Элемент с таким позиционированием не будет вырван из потока документа и подобно static будет подчиняться всем правилам, которые могут воздействовать на него со стороны других элементов. Однако, если его ввели, значит оно чем-то все же отличается от static. Дело в том, что элемент с “относительным” (именно так переводится relative) позиционированием становится податливым для таких правил как top, left, right, bottom. За точку отсчета этих правил он берет самого себя.

Тут нужно сделать отступление и сказать, что несмотря на то, что мы как пользователи смотрим на документ и он нам кажется двухмерным, третье измерение (назовем его высотой) у него всё-таки есть, и направлено оно на нас - это ось Z. Так вот, при “статичном” позиционировании правило отвечающее за расположение элемента по оси Z (z-index) принимает значение auto. С таким значением элемент располагается в одной плоскости с остальным документом.

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

Самое близкое сравнение всего вышеописанного, на мой взгляд, это человек с воздушным змеем. Человек стоит на месте (элементу всё так же выделяется место в потоке документа), а змей связанный с этим человеком нитью накладывается поверх (смещение с помощью left, top, bottom, right) всего того, что окружает человека.

Где может пригодиться position: relative;? Возьмем хотя бы случай, когда на каком-то блоке нужно затемнить фон с помощью “маски”, но текстовые элементы должны быть поверх этой маски. Самый простой способ это сделать - задать этим текстовым элементам position: relative; и если потребуется увеличить z-index.

Сделаем блок-заглушку:

Подопытным элементом выступать будет span с классом relative. Внесем следующие правила в CSS:

И получим, ничем не примечательную картинку:

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

А теперь давайте попробуем воздействовать на него правилом top со значением 17px:

И получим следующую картину:

Тут мы видим три вещи:

- элемент сместился относительно себя на 17px вниз (оттолкнулся от верха), - элемент “залез” на соседа снизу,
- и место для элемента осталось в потоке документа выделено несмотря на то, что он “уполз”.

2. Position: absolute; - он теряет корни, и улетает в небо.

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

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

Давайте разбираться:

Тут мы изменили нашему span class, это не обязательно, но сделаем чтобы не путаться.

Пропишем следующие правила для нового класса:

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

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

А что если среди его предков был бы элемент с позиционированием отличным от static?

Введем для блока относительное позиционирование, и увидим следующее:

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

Что ещё мы можем сказать про абсолютное позиционирование?

Элемент с таким позиционированием по умолчанию занимает пространство достаточное, для отображения элемента, но не более того. Однако, если задавать элементу противоположные значения (например, top и bottom) - его можно растянуть.

Кроме того элемент с абсолютным позиционированием получает display: block;.

Двинемся дальше.

3. Position: fixed; - всегда с тобой.

Элемент с фиксированным позиционированием теряет место, выделяемое ему в документе (точно так же, как и с абсолютным позиционированием). Однако, привязывается и позиционируется элемент с фиксированным позиционированием относительно области просмотра (viewport). То есть даже при прокрутке вертикальной, равно как и горизонтальной, элемент остается в поле зрения. Часто такое позиционирование задают навигациям и меню.

ШТОШ, посмотрим как это выглядит:

Вновь изменим класс нашему элементу.

Что мы можем увидеть на этой “картине”?

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

Теперь попробуем прокрутить экран вниз:

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

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

4. Position: sticky; - банный лист.

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

Чем же он отличается от остальных типов позиционирования?

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

Давайте посмотрим как это работает:

Вновь меняем, ради порядка разумеется, класс подопытному кролику.

Прописываем правила.

Наш элемент располагается на своем месте в общем потоке документа.

Но, что если мы прокрутим полосу вниз?

Элемент остался на экране, на заданном через top: 0; месте.

Мы рассмотрели все варианты позиционирования. Ничего сложного :)

Надеюсь, мне удалось донести информацию о том, чем они отличаются и как их применять. Остались вопросы? Комментарии - наше всё.

Помните, глупых вопросов не бывает. Самый глупый вопрос тот, что не был задан.

Желаю Вам успеха!