В наши дни веб-разработчики могут строить сложные раскладки веб-страниц, используя различные техники CSS. Некоторые из этих техник имеют длинную историю (флоаты), другие (флексбокс) достигли популярности в последние годы.

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования .

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

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

• relative
• absolute
• fixed
• sticky

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

• right
• bottom
• Начальное значение этих свойств - ключевое слово auto .

Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed , то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index , определяющее порядок наложения.

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

• абсолютно (absolute) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
• относительно позиционированные (relative) и приклеенные (sticky) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
• фиксированные (fixed) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (overflow:auto). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

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

Позиционирование элементов с абсолютным типом позиционирования

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

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

Итак, абсолютно позиционированный элемент смещается относительно своего ближайшего спозиционированного предка. Конечно, это работает, если у кого-либо из предков position отличается от static - если у элемента нет спозиционированных предков, он смещается относительно зоны видимости.

Это демонстрируется следующим примером:

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0 , его предку (красному блоку) позиционирование не задавалось вообще.

Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков.

Абсолютно позиционированные элементы игнорируют свойство float

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

Взгляните на соответствующее демо:

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

Абсолютно позиционированные строчные элементы становятся блочными

Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице .

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) - строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов

По умолчанию, когда у два вертикальных внешних отступа соприкасаются, они объединяются в один, равный максимальному из них. Это называется схлопывание внешних отступов .

Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами - их отступы не объединяются с соседними.

В этом демо элементу задан отступ в 20 пикселей. Его отступ коллапсирует с отступом родительского элемента, также равного 20 пикселям. Как видите, только при абсолютном позиционировании схлопывания не происходит.

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант - добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

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

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

Демо показывает эту разницу:

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

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

Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя.

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

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

Вообщем-то, мы увидим естественное поведение элементов, а порядок их отображения на странице – потоком документа. Но нас совсем не устраивает такой порядок, мы хотим логотип разместить в левом верхнем углу, а кнопку чуть правее. Нам нужен полный контроль над всеми элементами, мы решаем, где и что будет находиться. А для этого нужен инструмент (свойство), меняющее обычное поведение элементов в потоке. Что же это за свойство?

В CSS стилях это называется позиционированием (position) , которое может быть обычным (static) , относительным (relative) и абсолютным (absolute) .

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

При относительном позиционировании , блок перемещается относительно своего исходного положения. Однако прописав блоку:

Position: relative;

ничего не произойдет, он останется на месте. А перемещает блок система координат (top, bottom, left, right) , как с положительными, так и отрицательными значениями.

Как это работает?

Внутри желтого блока с классом block-yellow находится красный блок с классом block-relative . В обычном потоке, красный блок перекрывает желтый, так как он в коде прописан последним.

Нам надо сдвинуть красный блок вниз на 10 пикселей. Сделать это можно, только насильственно поменяв позицию красного блока. Мы так и пишем top: 10px , но надо указать, от чего отсчитывать эти 10 пикселей?

Прописав position: relative , мы ясно даем понять, что отсчитывать относительно его текущего положения.

Block-yellow {
background-color: #ffe70f;
}

Block-relative {
position: relative;
top: 10px;
background-color: #ed5b77;
}

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

Если убрать из кода position: relative , то блок останется на месте. А если вместо relative , написать absolute , то по умолчанию отсчет этих 10 пикселей будет вестись от края окна браузера и в итоге наш блок наоборот поднимется вверх, подтягиваясь к нижней кромке браузера. А это в наши планы не входило.

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

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

Position: absolute;

Есть одна особенность. Абсолютное позиционирование оказывает влияние и на строчные элементы. Если строчному элементу задать position: absolute , то он станет вести себя как блочный. Это аналог свойству - display: block .

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

Блок с классом block-absolute находиться внутри родителя block-yellow .

Block-yellow {
position: relative;
padding: 10px;
background-color: #ffe70f;
}

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

Block-absolute {
position: absolute;
bottom: 10px;
left: 10px;
background-color: #ed5b77;
}

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

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

z-index

Разруливает порядок перекрытия "абсолютных" блоков. Нам надо, чтобы красный блок был сверху желтого, тогда мы указываем z-index: 2 для красного и z-index: 1 для желтого.

Block-red {
position: relative;
z-index: 2;
background-color: #ffe70f;
}

Block-yelow {
position: absolute;
top: 20px;
z-index: 1;
background-color: #ed5b77;
}

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

• left - для задания расстояния в пикселах от левого края окна (х-координата);
• top - для задания расстояния в пикселах от верхнего края окна (у-координата);
• z-index - для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.
Кроме свойств-координат, нам понадобится свойство роsition , которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

• absolute - заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тега внутри HTML-документа;
• relative - элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative , а свойства координат left и top - нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения;
• static - элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index . Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.

<НЕАD>