x
 
Юрий Мазурский
30 мая 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Часть вторая: абсолютное позиционирование


С чего начать вёрстку

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

С чего начать вёрстку

Абсо­лют­ное пози­ци­о­ни­ро­ва­ние эле­мен­тов вклю­ча­ется свой­ством position: absolute. Глав­ное, что нужно пом­нить, — абсо­лют­ное пози­ци­о­ни­ро­ва­ние выры­вает эле­мент из потока и он начи­нает суще­ство­вать сам по себе.

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

Конечно, нет ника­кого смысла выры­вать эле­мент из потока про­сто так, не при­вя­зы­вая ни к чему. Для управ­ле­ния при­вяз­кой эле­мента с абсо­лют­ным пози­ци­о­ни­ро­ва­нием исполь­зу­ется position: relative у роди­тель­ского эле­мента. Бли­жай­ший роди­тель с position: relative ста­нет для эле­мента с абсо­лют­ным пози­ци­о­ни­ро­ва­нием соб­ствен­ной локаль­ной систе­мой коор­ди­нат. Все отступы будут счи­таться от гра­ниц такого роди­тель­ского эле­мента. Назо­вём его якор­ным элементом.

Раз­ме­щая якор­ные эле­менты на нуж­ных уров­нях иерар­хии ДОМ‑дерева, мы можем управ­лять поло­же­нием и огра­ни­чи­вать «поле дея­тель­но­сти» абсо­лютно спо­зи­ци­о­ни­ро­ван­ных эле­мен­тов. Ана­ло­гич­ным обра­зом рабо­тают и эле­менты с position: absolute внутри роди­те­лей с position: absolute.

Помимо свойств margin и padding, у эле­мен­тов с абсо­лют­ным пози­ци­о­ни­ро­ва­нием появ­ля­ется ещё один спо­соб управ­лять поло­же­нием и раз­ме­рами — с помо­щью свойств top, right, bottom и left.

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

<div class="outer">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="black"></div>
</div>
.outer {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #f00;
}

.blue {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: #00f;
  border-radius: 20px;
}

.red {
  position: absolute;
  top: 40px;
  left: 10px;
  right: -10px;
  height: 40px;
  background-color: #f00;
  border-radius: 20px;
}

.green {
  position: absolute;
  top: 80px;
  bottom: 0;
  right: 50%;
  width: 40px;
  background-color: #0f0;
  border-radius: 20px;
}

.black {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #000;
  border-radius: 20px;
}
Попро­буйте поиг­рать с отсту­пами и раз­ме­рами эле­мен­тов в при­мере на Код­пене

Пара классических трюков с абсолютным позиционированием

Поста­вить по цен­тру эле­мент с зара­нее извест­ными размерами:

<div class="parent">
  <div class="centered-stuff"></div>
</div>
.parent {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #f00;
}

.centered-stuff {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: auto;
  background-color: #00f;
}

Поста­вить по цен­тру эле­мент с неиз­вест­ными раз­ме­рами, напри­мер, кнопку:

<div class="parent">
  <button>Кнопка</button>
</div>
.parent {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #fff1a5;
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Юрий Мазурский
4 июня 2019

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

Алексей Елисеев
3 июня 2019

У последнего совета про центрирование есть недостаток — он задаёт контекст для fixed-позиционированных элементов. Поэтому я бы добавил третий способ — c помощью flex.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как менеджеру ставить задачи, чтобы ротация в команде не заставляла пережёвывать все задачи устно по 100 раз? Режимы наложения в ЦСС 2 Есть ли смысл учить Ruby on Rails в 2019 году? 3 Где провести границу MVP? 1




Недавно всплыло

2 В бюро есть таймтрекинг для сотрудников? 5 Хочу научиться сторителлингу 2 Хочу научиться сторителлингу 10