CSS позиционирование – шпаргалка для начинающих
Позиционирование элементов на странице – ключевой аспект для создания правильной и функциональной верстки. В этой статье рассмотрены основные методы CSS позиционирования, которые помогут вам эффективно управлять расположением объектов на сайте.
Вы узнаете, какие подходы подходят для разных задач, и как выбрать оптимальный вариант для вашего проекта. Простые объяснения и примеры помогут быстро разобраться и применить эти навыки в реальной практике.
Типы позиционирования в CSS
В HTML каждый элемент представляет собой некий прямоугольник, для которого необходимо указать внешние и внутренние отступы, а также границу, разделяющую их.
Схемы позиционирования определяют, где этот прямоугольник должен находиться и как должен влиять на окружающие его элементы.
В CSS свойство position может принять пять значений:
- relative;
- absolute;
- inherit;
- fixed;
- static.
Все элементы веб-страницы по умолчанию позиционируются значением static. Это означает, что каждый элемент расположен в соответствии с естественным порядком добавления на страницу. Элементы блоков располагаются под элементами блоков, строчные — друг за другом.
Абсолютное позиционирование
Данный тип позиционирования удаляет элемент в общем потоке документа. Окружающие элементы игнорируют искомый так, будто ему присвоено свойство display: none;.
В том случае, если вы не хотите, чтобы пространство заполнялось другими элементами, вам нужно установить абсолютное позиционирование для элемента, указав свойства left, right, bottom и top. Если не указано ни одно свойство, для пары top-left присваивается значение 0.
Ключевым моментом абсолютного позиционирования является понимание точки отсчёта: такие элементы позиционируются относительно самого близкого родительского элемента с позиционированием, отличным от static. В том случае, если ближайший элемент не существует, позиционирование происходит относительно основного документа.
Относительное позиционирование
Элементы с относительным позиционированием располагаются относительно собственной позиции (сдвиг на основе своего стандартного месторасположения). При сдвиге изображения на его месте остаётся образ, относительно которого все элементы располагаются и накладываются друг на друга.
Относительно позиционированные элементы берутся из нормального потока, однако по-прежнему оказывают некоторое влияние на расположение элементов по соседству, ведущих себя так, что в потоке документа исходный элемент всё ещё существует.
Для использования этого вида позиционирования, необходимо для свойства position указать значение relative:
- Данный тип позиционирования не применим к табличным элементам (строки, колонки, ячейки и т. д.);
- Место, которое элемент занимал до смещения, не заполняется выше- или ниже располагающимися элементами и остаётся пустым.
Для того чтобы позиционирование дочернего элемента выполнялось относительно родительского, для первого необходимо указать свойство position: absolute, а для второго — position: relative:
Фиксированное позиционирование
Данная схема позиционирования напоминает схему абсолютного позиционирования, однако имеются небольшие различия:
- Фиксировано позиционированный элемент всегда игнорирует родительские элементы и располагается относительно окна браузера;
- При пролистывании страницы элемент не смещается.
Зачастую фиксированное позиционирование применяется для создания вкладок, меню, заголовков и любых прочих элементов, которые должны быть постоянно видны пользователю сайта.
Z-Index
Веб-страницы являются двухмерными элементами, имея значения ширины и высоты, а свойство z-index добавляет странице глубину. Чем больше значение z-index, тем «выше» располагается элемент на странице, и наоборот, элемент с меньшим значением z-index находится за элементом с более высоким значением.
Таким способом можно добиться некой объёмности страницы.
Позиционирование фона
По умолчанию background (фон) страницы появляется в верхнем левом углу страницы, однако часто возникают ситуации, в которых необходимо задать конкретную позицию данного элемента (например, в том случае, если задний фон представляет собой большое изображение, занимающее всю страницу и, в отличие от контента, прокручиваться не должен).
Позиционирование фона страницы осуществляется при помощи свойства background-position, значениями которого могут являться процентные соотношения, числовые значения в разных единицах измерения, определённые ключевые слова.
Например:
- background-position: center left;
- background-position: bottom right;
- background-position: 20% 90%;
- background-position: 40px 40 px.
Процентные значения можно использовать совместно с единицами измерения: при указании одного параметра, второй автоматически принимает значение 50%.
Перечисленные схемы позиционирования определяют влияние элемента на соседние и правила его размещения на веб-странице.
Чаще всего при вёрстке используют свойство float, применяя позиционирование лишь для тех элементов, которые необходимо выделить из общего потока.
На сегодня это все. Удачи Вам!
Комментарии