2.4. CSS-позиционирование
CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).
В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:
- размерами и типом элемента,
- схемой позиционирования (нормальный поток, обтекание и абсолютное позиционирование),
- отношениями между элементами в дереве документа,
- внешней информацией (например, размер области просмотра, внутренними размерами изображений и т.д.).
Схемы позиционирования
- Содержание:
- 1. Содержащий блок
- 2. Выбор схемы позиционирования: свойство position
- 3. Смещение блока: свойства top, right, bottom, left
- 4. Обтекание: свойство float
- 5. Управление потоком рядом с плавающими элементами: свойство clear
- 6. Определение контекста наложения: свойство z-index
- 6.1. Контекст наложения
В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:
Нормальный поток
Нормальный поток включает блочный контекст форматирования (элементы с display block , list-item или table ), строчный (встроенный) контекст форматирования (элементы с display inline , inline-block или inline-table ), и относительное и «липкое» позиционирование элементов уровня блока и строки.
Обтекание
В обтекающей модели блок удаляется из нормального потока и позиционируется влево или вправо. Содержимое обтекает правую сторону элемента с float: left и левую сторону элемента с float: right .
Абсолютное позиционирование
В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается позиция относительно содержащего блока. Абсолютное позиционирование реализуется с помощью значений position: absolute; и position: fixed; .
Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.
1. Содержащий блок
Положение и размер блока(ов) элемента иногда вычисляются относительно некоторого прямоугольника, называемого содержащим блоком элемента (containing block). В общих словах, содержащий блок — это блок, который содержит другой элемент. В случае нормального потока корневой элемент html является содержащим блоком для элемента body , который, в свою очередь, является содержащим блоком для всех его дочерних элементов и так далее. В случае позиционирования содержащий блок полностью зависит от типа позиционирования. Содержащий блок элемента определяется следующим образом:
- Содержащий блок, в котором находится корневой элемент, представляет собой прямоугольник — так называемый начальный содержащий блок.
- Для некорневого элемента с position: static; или position: relative; содержащий блок формируется краем области содержимого ближайшего родительского блока уровня блока, ячейки таблицы или уровня строки.
- Содержащим блоком элемента с position: fixed; является окно просмотра.
- Для некорневого элемента с position: absolute; содержащим блоком устанавливается ближайший родительский элемент со значением position: absolute/relative/fixed следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область содержимого плюс поля элемента padding ;
— если предок — элемент уровня строки, содержащим блоком будет область содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный содержащий блок. - Для «липкого» блока содержащим блоком является ближайший предок с прокруткой или окно просмотра, в противном случае.
2. Выбор схемы позиционирования: свойство position
Свойство position определяет, какой из алгоритмов позиционирования используется для вычисления положения блока.
Свойство не наследуется.
Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.
Отступы margin абсолютно позиционированных блоков не схлопываются.
Абсолютно позиционированный блок создает новый содержащий блок для дочерних элементов нормального потока и потомков с position: absolute; .
«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.
«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
position: static; position: relative; position: absolute; position: sticky; position: fixed; position: initial; position: inherit;
3. Смещение блока: свойства top, right, bottom, left
Элемент считается позиционированным, если свойство position имеет значение, отличное от static . Позиционированные элементы генерируют позиционированные блоки и могут быть расположены в соответствии со следующими четырьмя физическими свойствами:
| top | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
top: 10px; top: 2em; top: 50%; top: auto; top: inherit; top: initial;Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).
| right | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
right: -10px; right: .5em; right: -10%; right: auto; right: inherit; right: initial;Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.
| bottom | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
bottom: 50px; bottom: -3em; bottom: -50%; bottom: auto; bottom: inherit; bottom: initial;Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.
| left | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
left: 50px; left: 10em; left: 20%; left: auto; left: inherit; left: initial;Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.
Положительные значения смещают элемент внутрь содержащего блока, а отрицательные — за его пределы.
4. Обтекание: свойство float
Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.
При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Правила, регулирующие поведение плавающих боков, описываются свойством float .
Свойство не наследуется.
| float | |
|---|---|
| Значение: | |
| none | Отсутствие обтекания. Значение по умолчанию. |
| left | Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю. |
| right | Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю. |
| inherit | Наследует значение свойства от родительского элемента. |
float: left; float: right; float: none; float: inherit;Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.
Плавающие элементы могут использовать отрицательные отступы margin , чтобы перемещаться за пределы области содержимого их родительского элемента.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .
Свойство не оказывает влияние на элементы с display: flex и display: inline-flex . Не применяется к абсолютно позиционированным элементам.
5. Управление потоком рядом с плавающими элементами: свойство clear
Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.
Свойство не наследуется.
| clear | |
|---|---|
| Значение: | |
| none | Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию. |
| left | Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе. |
| right | Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе. |
| both | Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе. |
| inherit | Наследует значение свойства от родительского элемента. |
clear: none; clear: left; clear: right; clear: both; clear: inherit;Для предотвращения отображение фона или границ под плавающими элементами используется правило .
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.
Блоки с более высокими уровнями всегда отображаются перед блоками с более низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в соответствии с порядком следования элементов в исходном документе. Блок элемента имеет ту же позицию, что и блок его родителя, если только ему не присвоен другой уровень свойством z-index .
Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.
| z-index | |
|---|---|
| Значение: | |
| auto | Вычисляется в 0 . Если для блока задано position: fixed; или это корневой элемент, значение auto также устанавливает новый контекст наложения. Значение по умолчанию. |
| целое число | Определяет положение блока в текущем контексте наложения. Также устанавливает новый локальный контекст наложения. Можно использовать любое целое число, включая отрицательные числа. Отрицательные значения помещают элемент вглубь экрана. |
| inherit | Наследует значение свойства от родительского элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
z-index: auto; z-index: 0; z-index: 5; z-index: 999; z-index: -1; z-index: inherit; z-index: initial;6.1. Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке:
- Корневой элемент , который содержит все элементы веб-странице.
- Блочные элементы, неплавающие и непозиционированные.
- Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
- Строковые непозиционированные элементы (текст, изображения).
- Позиционированные position элементы в порядке их следования в исходном коде. Последний из них будет расположен на переднем плане.
Свойство z-index создает новый контекст наложения. Оно позволяет изменить порядок наложения позиционированных элементов. Элементы будут отображаться на странице в следующем порядке (если для них не заданы свойства, влияющие на контекст наложения — opacity , filter , transform ):
- Корневой элемент , который содержит все элементы веб-странице.
- Позиционированные элементы с отрицательным значением z-index .
- Блочные элементы, неплавающие и непозиционированные.
- Плавающие float непозиционированные элементы в порядке их расположения в исходном коде.
- Строковые непозиционированные элементы (текст, изображения).
- Позиционированные элементы со значениями z-index: 0; и z-index: auto; .
Перемещения и трансформации в CSS3
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
Система координат
Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.
Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.
1: Горизонтальное перемещение
Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.
Двигаемся вправо
Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.
HTML
Откройте ваш любимый редактор кода и введите следующее:
- object: Установление главных правил нашего объекта.
- van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
- move-right: Используя этот класс, мы будем двигать наш объект.
.object < position: absolute; >.van
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.
#axis:hover .move-right < transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ >Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.
.object < position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ >- linear: перемещение происходит постоянной скоростью от начала и до конца.
- ease: перемещение начинается медленно и затем набирает скорость.
- ease-in: перемещение начинается медленно.
- ease-out: перемещение заканчивается медленно.
- ease-in-out: перемещение начинается и заканчивается медленно.
- cubic-bezier: ручное определение значения перемещения.
Двигаемся влево
Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.
HTML
Создайте новый документ html и вставьте следующий код:
На этот раз мы используем класс move-left, чтобы переметить объект влево.
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.
#axis:hover .move-left < transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ >Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО
2: Вертикальное перемещение
Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.
Двигаемся вверх
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up
Двигаемся вниз
Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);
HTML
CSS
#axis:hover .move-down
3: Диагональное перемещение
Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.
HTML
CSS
#axis:hover .move-ne
4: Вращение
Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.
Вращение по часовой стрелке
Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).
HTML
CSS
#axis:hover .rotate360cw
Вращение против часовой стрелки
Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).
HTML
CSS
#axis:hover .rotate360ccw
5: Масштабирование
Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.
HTML
CSS
#axis:hover .larger
6: Множественные движения
После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.
HTML
CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.
#axis:hover .multiple
Заключение
Итак, в этой статье мы рассмотрели основные примеры трансформации. Помните, что нужно обращать внимание на совместимость с различными браузерами. И не переусердствуйте с этими эффектами, ведь они могут не только не улучшить ваш дизайн, но и испортить его.
Как двигать блоки в css
CSS position — один из мощнейших инструментов, позволяющий размещать различные элементы в системе координат, что дарит определённую свободу в дизайне, выводя его за пределы обыкновенных решений.
В тот момент, когда браузер загружает веб-страницу, происходит рендеринг элементов (заголовки, строки, параграфы, блоки div и т. д.) в той последовательности, в которой они встречаются в разметке HTML-документа. Позиционирование упорядочивает процесс отображения всех элементов на странице сайта.
Типы позиционирования в 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 , применяя позиционирование лишь для тех элементов, которые необходимо выделить из общего потока.
Позиционирование элементов: разбор всех значений position в CSS
Всем привет, меня зовут Анна Блок, и эта статья будет посвящена довольно «острой» теме, которая связана с позиционированием элементов. Мы поговорим о таком свойстве как position и его значениях: relative, absolute и fixed. Также мы поговорим о таком значении как static, но по большей степени нас будет интересовать именно первая «троица», так как она чаще всего используется на сайтах.
Если ты постоянно задаешься вопросом, какое значение и в какой ситуации нужно использовать, то эта статья для тебя. Разбор начнём с теории и после на практике отражу примеры на сайте Codepen.
Position
Свойство position устанавливает способ позиционирования элемента относительно окна браузера или других элементов на web-странице. Сейчас на данный момент это свойство поддерживает 5 значений: absolute, fixed, relative, static и sticky.
Relative
Это относительное позиционирование. В данном случае положение элементов устанавливается относительно его исходного места, при этом если мы добавим такие свойства как: left, top, right и bottom, то мы изменим позицию элемента и сдвинем его в ту или иную сторону в зависимости от значений.
Absolute
Это абсолютное позиционирование. Когда мы указываем данное назначение, то мы даем понять, что элемент будет абсолютно позиционирован. При этом другие элементы отображаются на веб-странице так, словно этого абсолютного позиционирования на странице нет. Если у элемента стоит position: absolute , то мы также можем управлять его местоположение при помощи каких свойств как: left, top, right и bottom.
Static
Это статичное позиционирование. В этом случае элементы отображаются, как обычно. Использование таких свойств как: left, top, right и bottom не приводит ни каким результатам.
Fixed
Это фиксированное позиционирование. В данном случае мы можем также управлять местоположением при помощи left, top, right и bottom, но при этом он свое положение на странице не будет менять в момент в скролл страницы.
Sticky
Это сочетание относительного и фиксированного позиционирования. Когда мы пишем position: sticky , то элемент рассматривается как относительный, пока он не пересекает определённый порог, после чего он уже будет рассматриваться как фиксированный. Как правило, такое значение применяется для фиксации заголовка на одном месте до тех пор, пока содержимое, к которому относится заголовок, прокручивается на странице.
Стоит отметить, что свойство position поддерживается браузерами уже довольно давно, но на тот момент поддерживалась только три свойства: static, relative и absolute и уже начиная с IE 7, появилась поддержка fixed. Но при этом относительно новое значение sticky не поддерживается Internet Explorer-ом совсем и относительная поддержка у Edge начинается только с шестнадцатой версии. Во всех остальных браузерах такое свойство, как position поддерживается без проблем.
Практика
Теперь давайте перейдем к практике, и я покажу, как на деле работают эти свойства. В HTML зададим блок под названием box и внутри него установим элемент под названием item.
Для box мы визуально зададим пространство, задав ему ширину и высоту, добавив обводку.
Далее мы стилизуем item. Также установим для него ширину, высоту, цвет фона и скругление уголов блока.
Итак, именно с этим примером мы сейчас будем работать и рассмотрим, как будут вести себя элементы при разных значения position.
Absolute
Давайте предположим, что нам необходимо разместить круг в том же месте, как это отображено на картинке. Как это сделать? Если вспомнить теорию, то там было сказано, что такое свойство, как position: absolute задает абсолютное позиционирование для элемента, поэтому давайте так и поступим.
Элементу item добавим position: absolute. Однако для того, что бы наш position работал, нам необходимо начать работу в связке с такими свойствами, как: left, top, right и bottom. В зависимости положения объекта, мы будем использовать то или иное свойство. В нашем случае нам нужно разместить его относительно правой и нижней сторон квадрата.
И тут мы видим первую проблему, с которой сталкиваются новички — круг вышел за приделы блока box. Вы должны помнить, что если вы в CSS не указали, какой блок является родителем (относительно какого блока должен позиционироваться элемент), то он позиционирует дочерний элемент относительно всего тега body. Решается эта проблема добавлением свойства relative для блока box.
После того, как мы это сделали, наша точка вернулась на необходимое место.
Ознакомиться подробнее с HTML и CSS можно тут:
Fixed
Добавим в блок box текста, что создать автоматический скролл на странице.
Теперь наша задача сделать так, что бы наша точка «преследовала» нас, и все время находилась в одной части экрана, как на картинке.
Для этого блоку item задаем position: fixed и мы видим, что она как бы «выпадает» из потока и по умолчанию ей присваиваются такие свойства, как top: 0 и left: 0 . Но при этом, конечно же, мы их всегда можем сбросить, если укажем конкретные значения
И теперь в момент, когда мы скролим страницу эта точка «идет» за нами, она зафиксировалась в одной части экрана.
Ознакомиться подробнее с HTML и CSS можно тут:
Static
Я скопировала все стили, которые у нас применялись в первом примере и теперь мы поговорим о position: static . По умолчанию, если для элемента вы не устанавливаете position , то автоматически у него подразумевается такое значение, как position: static . Давайте представим, что в какой-то момент вам предстоит заняться адаптивом сайта. Вероятнее всего, вам потребуется менять ширину у блока box.
С этими значениями блок будет сворачиваться при любой ширине экрана, но при этом position у блока item мы можем установить, как position: static .
И как мы видим, он игнорирует все, что мы писали ранее, это right и bottom. Даже, если мы изменим значения, сделаем их больше или меньше это никак не повлияет на расположение данного элемента, так как position: static сбрасывает все это. Поэтому, если в какой-то момент вам необходимо сбросить стили, то помните, что достаточно прописать только position: static и в таком случае right , bottom , left , top менять в @media не потребуется.
Ознакомиться подробнее с HTML и CSS можно тут:
Sticky
Итак, теперь давайте рассмотрим четвертый пример. В нем мы создадим блок header, внутри которого содержится текст. Рядом создадим блок main, внутри которого размести блок side с текстом, что бы на странице появился скрол и блок sticky с заголовком. Под блоком main разместим еще один блок и назовем его footer с добавлением текста.
Таким образом, у нас получилась чистая разметка HTML. Ее мы и будем стилизовать. Начнем с блока side, установив ему ширину.
Далее стилизуем заголовок, задав ему цвет текста и цвет фона.
Далее главному блоку sticky добавим position: sticky . Визуально пока у нас ничего не изменилось, но при этом, что бы он «выпал» из потока нужно работать в связке с float , поэтому добавляем ему float: right . Как мы видим, при скроле он у нас не цепляется наверх, поэтому чтобы это исправить необходимо дописать top: 0 и задать ширину.
Теперь при скроле заголовок цепляется к верху и продолжает «идти» за нами по мере следования по странице.
Ознакомиться подробнее с HTML и CSS можно тут:
Вместо заключения
Надеюсь, данная статья помогла тебе расставить все точки над i относительно всех значений применяемых в свойстве position . К сожалению, статья не может отразить в полной мере отразить все действия от и до при создании примеров, поэтому обязательно посмотри видео оригинала, которые размещено ниже.
Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.
CSS позиционирование блоков
Представьте себе, что веб-разработчику совсем не нужно думать о том, как будет выглядеть визуально готовая страница. Он просто пишет код, элементы сами выстраиваются на странице, сверху вниз (блочные) и слева направо (строчные). Чем выше по документу написан код, тем выше он будет отображаться на странице.
Вообщем-то, мы увидим естественное поведение элементов, а порядок их отображения на странице – потоком документа. Но нас совсем не устраивает такой порядок, мы хотим логотип разместить в левом верхнем углу, а кнопку чуть правее. Нам нужен полный контроль над всеми элементами, мы решаем, где и что будет находиться. А для этого нужен инструмент (свойство), меняющее обычное поведение элементов в потоке. Что же это за свойство?
В CSS стилях это называется позиционированием (position), которое может быть обычным (static), относительным (relative) и абсолютным (absolute).
Относительное позиционирование в CSS
При относительном позиционировании, блок перемещается относительно своего исходного положения. Однако прописав блоку:
ничего не произойдет, он останется на месте. А перемещает блок система координат (top, bottom, left, right), как с положительными, так и отрицательными значениями.
Как это работает?
Внутри желтого блока с классом block-yellow находится красный блок с классом block-relative. В обычном потоке, красный блок перекрывает желтый, так как он в коде прописан последним.
Нам надо сдвинуть красный блок вниз на 10 пикселей. Сделать это можно, только насильственно поменяв позицию красного блока. Мы так и пишем top: 10px, но надо указать, от чего отсчитывать эти 10 пикселей?
Прописав position: relative, мы ясно даем понять, что отсчитывать относительно его текущего положения.
На картинке мы видим, как красный блок сдвинулся вниз, на 10 пикселей вниз, от своего первоначального положения.
Если убрать из кода position: relative, то блок останется на месте. А если вместо relative, написать absolute, то по умолчанию отсчет этих 10 пикселей будет вестись от края окна браузера и в итоге наш блок наоборот поднимется вверх, подтягиваясь к нижней кромке браузера. А это в наши планы не входило.
Абсолютное позиционирование в CSS
На картинке блок позиционирован абсолютно, это когда отсчет системы координат ведется от края браузера, заменив всего одно слово, мы поменяли положение блока.
Есть одна особенность. Абсолютное позиционирование оказывает влияние и на строчные элементы. Если строчному элементу задать position: absolute, то он станет вести себя как блочный. Это аналог свойству — display: block.
Это ещё не всё, «абсолютный» элемент, находящийся внутри «относительного» родителя, меняет свою точку отсчета координат и начинает позиционироваться от родителя.
Блок с классом block-absolute находиться внутри родителя block-yellow.
Поскольку желтый блок имеет относительное позиционирование, то красный блок с абсолютным позиционированием, сдвигается относительно красного на заданные пиксели.
Фиксированное позиционирование
При прокручивании страницы блок с position: fixed, будет оставаться на месте, обычно такой метод применяют для закрепления навигационной панели.
z-index
Разруливает порядок перекрытия «абсолютных» блоков. Нам надо, чтобы красный блок был сверху желтого, тогда мы указываем z-index: 2 для красного и z-index: 1 для желтого.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
CSS свойство position
Свойство position помогает управлять расположением элементов на странице. Например, следующие инструкции:
сместят элемент относительно своего исходного положения вниз на 10px.
Синтаксис
Свойство может применяться вместе с указанием отступа от краев контейнера (левого, нижнего, правого, верхнего).
Например, создадим два контейнера, родительский (parent) – в синей рамке и дочерний (element) внутри него. Для дочернего элемента установим относительное позиционирование relative и сдвиги сверху и слева по 10px.
Результат выполнения видно ниже.
Значения
Свойство position может принимать следующие значения:
static По умолчанию каждый элемент имеет положение static , при котором он находится в обычном потоке страницы. Если установлено, то применение left , top , right и bottom не имеет никакого воздействия. absolute Элемент удаляется из потока документа, а другие блоки будут вести себя так, как будто его нет. Положение блока определяется значениями top , right , bottom , и left . Блок расположится как бы поверх всех элементов. Учтите, что на местоположение влияет значение свойства position его предка. Позиционирование идет от ближайшего предка со значением position не равном static . Если такого не найдется, отсчет координат идет от документа. relative Позиционируется обычным образом, а затем смещается относительно своей позиции в соответствии со значениями top , right , bottom и left . Такое смещение не влияет на местоположение других элементов. fixed При указании этого значения элемент привязывается к точке на экране, указанной значениями left , top , right и bottom , при этом блок не меняет своего положения при прокрутке документа. sticky Экспериментальное свойство – элемент обрабатывается как имеющий относительное положение до тех пор, пока положение прокрутки области просмотра не достигнет указанного порога, после чего блок занимает фиксированное положение, в котором он и остается. inherit Это значение можно использовать, чтобы принудительно заставить наследовать значение позиционирования от его предка.
Координаты
Для сдвига можно использовать четыре координаты:
- top – сдвиг от верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
В качестве указания значений можно использовать принятые в CSS единицы измерения: px, em и т.п., а также проценты. Так, left: 10% сместит элемент на 10% его ширины вправо.
Возможны отрицательные координаты. При смещении часть элемента может оказаться за границей контейнера или документа.
Рассмотрим их работу подробнее на примерах.
Абсолютное позиционирование
Если дочерний элемент имеет абсолютное значение, то родительский будет вести себя так, как будто дочернего вообще нет. Элемент позиционируется относительно своего ближайшего предка, который не является static . Если такого не найдется, тогда он спозиционируется относительно страницы.
Создадим два блока. При этом для предка не будем устанавливать position , а для дочернего зададим:
В результате видим, что элемент расположился относительно всего документа (прижался к его низу), а не своего предка.
Таким образом для корректного положения нужно задать позиционирование для предка. Например:
Теперь свойства top , bottom , left , right соотносятся с предком и видно, как изменилось положение элемента – получилось прижать элемент к низу блока-родителя.
- Ширина элемента с position: absolute устанавливается по содержимому.
- Элемент получает свойство display:block .
Фиксированное позиционирование
Значение fixed по воздействию похоже на абсолютное позиционирование. Оно поможет расположить элемент в любом месте документа, но это расположение не будет меняться при прокрутке документа. Посмотрите на поведение дочернего элемента на демонстрации ниже, на то, как при прокрутке он продолжает оставаться внизу страницы.
Для закрепления блока внизу экрана использовалось bottom , и точно также вы можете поднять его вверх используя свойство top .
При position , установленном в значения absolute или fixed , свойство display по умолчанию устанавливается в block , а float — в none .
“Липкое” позиционирование
Sticky можно перевести как “липкий”. Это некий компромисс между относительным и фиксированным значениями. На текущий момент это экспериментальное значение и не является частью официальной спецификации. Оно лишь частично поддерживается некоторыми браузерами. Поэтому, вероятно, пока не стоит использовать его на рабочих проектах.
Что оно делает? Позволяет позиционировать элемент относительно чего-либо в документе, а затем, когда пользователь прокручивает определенную точку в области просмотра, фиксирует положение элемента в этом месте, чтобы он оставался постоянно отображаемым, как фиксированный. Проще понять его работу взглянув на пример ниже.
Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при overflow равном hidden , scroll , auto или overlay , даже если тот не является ближайшим фактически прокручивающим родителем.
Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.
Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.
Похожие публикации:
- Как выровнять текст по центру css
- Как двигать картинку в css
- Как убрать обводку у select css
- Как убрать подчеркивание ссылки в css
transform
CSS-свойство transform позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.
Интерактивный пример
Если свойство имеет значение, отличное от none , будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.
Предупреждение: Только трансформируемый элемент может быть transform . Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US) .
Синтаксис
/* Значения ключевым словом*/ transform: none; /* Значения функций */ transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Мультифункциональные значения */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Глобальные значения */ transform: inherit; transform: initial; transform: unset;
Свойство transform может быть указано как значение ключевого слова none или как одно или более значений .
Значения
Одна или более применяемых функций CSS-трансформации (en-US) . Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.
Указывает, что трансформация не должна применяться.
Формальный синтаксис
transform =
none | (en-US)
=
(en-US) + (en-US)
Если perspective() (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.