CSS Макет - свойство position
CSS cвойство position
определяет тип метода позиционирования и используется для элемента, имеет значения (static
, relative
, fixed
или absolute
).
CSS cвойства позицирования
CSS cвойство position
определяет тип метода позиционирования, используется для элемента.
Есть четыре различных значения позиции:
static
статическая позицияrelative
относительная позицияfixed
фиксированная позицияabsolute
абсолютная позиция
Затем элементы устанавливаются с помощью CSS cвойства top
, right
, bottom
и left
. Однако, это свойство не будет работать, если свойство position
установлено одно. CSS cвойство position
также работает по-разному, в зависимости от значения позиции.
CSS Позиция статистическая
Элемент HTML position: static;
расположены статический по умолчанию.
Статические позиционированные элементы не влияют на свойства top
, right
,
bottom
и left
.
Элемент с position: static;
не позиционируется по-особенному; он всегда располагается в соответствии с нормальным потоком страницы:
<div>
имеет статическую позицию position: static;
Пример CSS, который используется:
div.static {
position: static;
border: 3px solid #73AD21;
}
Попробуйте сами »
CSS Позиция относительная
Элемент с position: relative;
позиционируется относительно своего нормального положения.
Установка CSS cвойства top
, right
, bottom
и left
относительно позиционируемого элемента приведет к регулировке от своего нормального положения. Контент не будет установлен с любой стороны, элемента.
position: relative;
Пример CSS, который используется:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
width:560px;}
Попробуйте сами »
CSS Позиция фиксированная
Элемент с position: fixed;
позиционируется относительно окна просмотра, что означает, что он всегда остается в том же месте, даже если страница прокручивается. CSS свойства top
, right
, bottom
и left
используются для установки элемента.
Фиксированный элемент не оставляет зазор на странице, где он обычно находится.
Обратите внимание на фиксированный элемент в нижнем правом углу страницы. Пример CSS, который используется:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Попробуйте сами »
<div>
имеет position: fixed;
CSS Позиция абсолютная
Элемент с position: absolute;
позиционируется абсолютно ближайшего позиционированного предка (позиционируется абсолютно окна просмотра, вместо фиксированного).
Однако, если абсолютное позиционирование элемента не расположено от предков, тогда он использует тело документа, и двигается вместе с прокруткой страницы.
Примечание: Элемент "расположенный" один, положение которого ничего не значит, кроме static
.
Пример CSS, который используется:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Попробуйте сами »
Позиция липкая
Элемент position: sticky;
позиционируется в зависимости от положения прокрутки пользователя.
Липкий элемент переключается между relative
и fixed
, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет выполнено заданное смещение - затем он "застревает" на месте (например, position:fixed).
Примечание: Internet Explorer не поддерживает фиксированное позиционирование. Для Safari требуется префикс -webkit- (см. пример ниже). Вы также должны указать хотя бы один из top
, right
, bottom
или left
для работы с фиксированным позиционированием.
В этом примере липкий элемент прилипает к верхней части страницы (top: 0
), когда вы достигаете его положения прокрутки.
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Попробуйте сами »
Расположение текста в изображении
Как разместить текст поверх изображения:
Попробуйте сами:
Сверху Слева » Сверху Справа » Cнизу Слева » Снизу Справа » По Центру »Еще примеры позицирования
Установить форму элемента
Этот пример показывает, как установить форму элемента. Элемент закрепляется в форму и отображается.
Все CSS свойства позиции
Свойства | Описание |
---|---|
bottom | Устанавливает бокс по нижниму краю поля |
clip | Подрезка абсолютной позиции элемента |
left | Устанавливает бокс по левому краю поля |
position | Устанавливает тип позиции для элемента |
right | Устанавливает бокс по правому краю поля |
top | Устанавливает бокс по верхнему краю поля |