Три типа позиционирования элементов

Оглавление

• Относительное позиционирование
• Абсолютное позиционирование
• Кроссбраузерность

Уметь управлять элементами на веб-страницах — один из самых главных навыков каждого front-end разработчика. Этим довольно важным инструментом, как правило, обладают очень многие веб-разработчики, к какой бы части данной отрасли они себя не относили. В данной статье, мы поговорим про два типа позиционирования элементов — относительный и абсолютный. Разберем как позиционировать элементы по трем осям — Z, X, и Y.

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

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

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

Довольно простая разметка и предельно понятные CSS стили. Но я все равно разместил максимальное количество комментариев, что бы вам было проще разобраться в коде. Казалось бы, все предельно просто. Но вот беда, описание профиля перекрывает изображение, а мы же задумывали сделать наоборот. Какие есть варианты и почему так произошло? Дело в том, что блок с описанием нашего профиля, идет после блока с фотографией. Вот и получается, что сначала мы взяли кусок хлеба, а потом на него намазали масло, но нам нужно сделать все наоборот. Для того, что бы добиться нужного результата, нам нужно сделать блок с фотографией и блок с описанием — позиционированными задав им два свойства — position: relative и  z-index: число.

.profile-avatar {
    display: inline-block;
    width: 70%;
    padding: 10px;
    border: 2px solid #123;
    position: relative; /* Делаем элемент позиционированным */
    z-index: 2; /* Накладываем z-ось со значением 2 */
}

figcaption {
    width: 80%;
    background-color: #F2F2F2;
    color: #555;
    padding: 120px 25px 25px;
    margin-top: -100px;
    display: inline-block;
    position: relative; /* Делаем элемент позиционированным */
    z-index: 1; /* Накладываем z-ось со значением 1 */
}

Тем самым мы говорим двум нашим блокам, что теперь вы оба позиционированные элементы, и мы можем крутить и вертеть вами как захотим. Смотрим что вышло…

Но почему фотография залезла на описание? Что именно сподвигло её это сделать? Все дело в свойстве z-index, со значениями 1 и 2 соответственно. С того самого момента, когда мы сделали оба наших блока позиционированными, мы получили возможность позиционировать их не только по осям X и Y (top, bottom, left и right), но и по оси Z (в имитируемом третьем измерении). Иными словами, мы поменяли местами хлеб и масло. Теперь мы хлеб намазываем на масло. Если указать у блока с описанием профиля z-index: 3; — то описание вновь будет выше фотографии, т. к. порядковое значение свойства, стало выше.

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

А теперь давайте представим, что нам необходимо разместить иконки в описании нашего профиля в правом нижнем углу. Тот кто уже побежал прописывать свойство float: right — тот, безусловно, молодец. Но использование поплавков для таких вещей, мягко говоря, не очень целесообразно. Ведь при использовании поплавков, другие элементы начинают обтекать наш элемент с других сторон, а нам это не нужно. Хотя поплавки — это тоже инструмент позиционирования элементов, только немного своеобразный. Так как же добиться нужного результата? Очень просто, нужно обратиться к документации свойства position: absolute.

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

htmlbook.ru

И так, теперь мы знаем, что если у родителя задано значение position: relative, то отсчет координат ведется от края родительского элемента. Это значит, что задав описанию профиля свойство position: relative, мы уже полдела сделали. Теперь нам нужно задать блоку с иконками абсолютное позиционирование.

/* Стили для блока с иконками, позиционируем справа по родительскому элементу figcaption. */
.profile .icons {
    position: absolute;
    right: 0;
    margin: -3px 8px; /* Чуть выравниваем */
}

Смотрим на результат.

Это два самых базовых инструмента позиционирование элементов на веб-страницах. Если кто-то из вас не понял, как они работают, придумайте сами себе домашнее задание. Например сделайте любой контейнер, внутри него разместите 3-4 любых элемента и попробуйте спозиционировать их по всем трем осям, используя при этом свойство position.

Кроссбраузерность

Данные свойства поддерживаются всеми современными браузерами.

• position: relative
• position: absolute
• z-index: значение