CSS Position: Относительная и абсолютная позиция
В этом посте мы рассмотрим свойство CSS Position. В частности, значения Относительные и Абсолютные. CSS расшифровывается как Cascading Style Sheet и является основой современной сети. CSS стилизирует контент, который мы видим по всему Интернету, это язык для описания того, как мы хотим, чтобы наш контент, определенный с помощью разметки HTML, отображался или отображался. Это один из важных инструментов в наборе инструментов современного веб-разработчика. Давайте посмотрим на одно из важных свойств CSS, Position и возможностей, которые оно открывает для макета контента на веб-странице.
W3C разработал CSS для организации и отделения контента от отображения и рендеринга, инструкций по стилю. Так родился CSS, который состоит из набора правил, отдельных от самого контента, но имеющих отношение к отображению контента через среды.
1. Образец заявки
Мы создадим простой макет, когда узнаем о свойстве CSS position в этой статье. Я создал пример приложения Nodejs, которое отображает пару HTML-страниц. Структура приложения примера приложения выглядит следующим образом:
2. CSS Position Свойство
Когда мы устанавливаем свойство position для элемента, он называется позиционированным. Мы используем это свойство, чтобы изменить место, где в противном случае будет отображаться элемент. По умолчанию все элементы имеют статическое значение для своего свойства position. Когда мы устанавливаем значение свойства position в значение, отличное от static, элемент считается позиционированным.
3. CSS Позиция Абсолют
Чтобы понять поведение элементов, когда их значение положения установлено на абсолютное значение, мы начнем со следующего макета.
Относительное позиционирование — CSS: Позиционирование элементов
Позиционирование является большим модулем в CSS и позволяет описать, как элемент внутри HTML-документа может быть размещен вне нормального потока документа. Как говорилось в прошлом уроке, нормальным потоком документа является поток, при котором все элементы выводятся в той последовательности, в которой они заданы внутри HTML-документа.
Одним из часто применяемых видов позиционирования является относительное позиционирование. Главный вопрос, который может возникнуть с самого начала: «Относительно чего будет позиционироваться элемент?». Ответ достаточно простой: относительно своей изначальной позиции. Элемент остается в потоке документа, и его место не стараются занять другие элементы.
Относительное позиционирование часто используют для визуальных эффектов, например, для создания тени с помощью второго блока или для небольшой анимации при наведении курсора мыши на элемент.
При наведении на элемент (для этого можно использовать селектор .animate-hover:hover ) мы использовали CSS-правило position: relative, что означает применение относительного позиционирования для элемента. Управлять расположением элемента со свойством position можно с помощью четырех CSS-свойств:
Каждое из этих свойств принимает значение, на которое будет «сдвинут» элемент. Эти значения не обязательно должны быть положительными, свойства также принимают и отрицательные значения. Попробуйте поизменять значения в примере выше и увидеть, как работают различные значения свойств top, right, bottom и left.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Свойство position
Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.
position: static
Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.
Его можно также явно указать через CSS-свойство:
position: static;Такая запись встречается редко и используется для переопределения других значений position .
Здесь и далее, для примеров мы будем использовать следующий документ:
Без позиционирования ("position: static"). Заголовок А тут - всякий разный текст.
. В две строки!
В этом документе сейчас все элементы отпозиционированы статически, то есть никак.
Элемент с position: static ещё называют не позиционированным.
position: relative
Относительное позиционирование сдвигает элемент относительно его обычного положения.
Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .
Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:
position: relative; top: 10px; h2 Заголовок сдвинут на 10px вниз. Заголовок А тут - всякий разный текст.
. В две строки!
Координаты
Для сдвига можно использовать координаты:
- top – сдвиг от «обычной» верхней границы
- bottom – сдвиг от нижней границы
- left – сдвиг слева
- right – сдвиг справа
Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.
Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:
h2 Заголовок сдвинут на 10% влево. Заголовок А тут - всякий разный текст.
. В две строки!
Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.
position: absolute
position: absolute;Абсолютное позиционирование делает две вещи:
- Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
- Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.
- Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
- Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).
Например, отпозиционируем заголовок в правом-верхнем углу документа:
h2 Заголовок в правом-верхнем углу документа. Заголовок А тут - всякий разный текст.
. В две строки!
Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.
Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.
Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.
Одновременное указание left/right , top/bottom
В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.
Браузер растянет такой элемент до границ.
div 10px от границОтносительное позиционирование
Если задать значение relative для свойства position , то положение элемента устанавливается относительно его исходного места. Добавление свойств left , top , right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 1), отрицательное — сдвиг вверх.
Рис. 1. Значения свойств left и top при относительном позиционировании
Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 2). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.
Рис. 2. Значения свойств right и bottom при относительном позиционировании
Для относительного позиционирования характерны следующие особенности:
- элемент можно смещать относительно исходного положения с помощью свойств left , right , top и bottom ;
- при смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами;
- если сдвинуть элемент вправо за пределы окна браузера, то появится горизонтальная полоса прокрутки;
- если сдвинуть элемент вниз за пределы окна браузера, то появится вертикальная полоса прокрутки;
- смещение элемента влево и вверх за пределы окна браузера не оказывает влияния на полосы прокрутки;
- работает свойство z-index ;
- этот тип позиционирования неприменим к элементам таблицы вроде ячеек, строк, колонок и др.
В примере 1 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.
Пример 1. Заголовок текста
Аз и буки шрифтовой науки
Шрифт это средство выражения дизайна, а не какого-то банального чтения.
Результат данного примера показан на рис. 3.
Рис. 3. Сдвиг текста относительно исходного положения
Относительное позиционирование часто применяется для создания анимации и эффектов, связанных со сдвигом элементов. В примере 2 с помощью элемента добавляется кнопка с тенью, при наведении курсора на кнопку она смещается вправо и вниз на величину тени, а сама тень при этом прячется. Всё это в комплексе придаёт кнопке трёхмерный эффект.
Пример 2. Сдвиг кнопки
Наведите курсор на кнопку, чтобы увидеть анимацию в действии. Время движения кнопки определяется свойством transition.
Для относительно позиционированных элементов работает свойство z-index , которое управляет положением элементов по оси Z. Если требуется задать наложение элементов относительно друг друга, то в стилях достаточно указать position со значением relative без смещения самого элемента. В примере 3 выводятся картинки, при наведении на них курсора они увеличиваются в размерах и отображаются поверх остальных изображений.
Пример 3. Использование z-index
Автор: Влад Мержевич
Последнее изменение: 05.08.2023
Создайте веб-страницу, показанную на рис. 1. Линии по бокам заголовка должны тянуться, независимо от размера окна браузера.
Гештальт, как бы это ни казалось парадоксальным, понимает культурный комплекс, к тому же этот вопрос касается чего-то слишком общего.
Создайте веб-страницу, как показано на рис. 1.
См. также
- bottom
- left
- position
- position в CSS
- relative и absolute
- right
- top
- z-index
- Абсолютное позиционирование
- Добавление тени
- Использование в вёрстке
- Липкое позиционирование
- Нормальное позиционирование
- Переходы в CSS
- Подробнее о позиционировании
- Поток
- Свойства позиционирования
- Фиксированное позиционирование