CSS Позиционирование
Свойство position определяет тип метода позиционирования и используется для элемента, имеет значения (static, relative,
fixed или absolute).
Свойство position
Свойство position указывает тип метода позиционирования, используется для элемента.
Есть четыре различных значения позиции:
staticстатическая позицияrelativeотносительная позицияfixedфиксированная позицияabsoluteабсолютная позиция
Затем элементы устанавливаются с помощью свойств top, right,
bottom и left.
Однако, это свойство не будет работать, если свойство position установлено одно.
position также работает по-разному, в зависимости от значения позиции.
Позиция статистическая
Элемент HTML position: static; расположены статический по умолчанию.
Статические позиционированные элементы не влияют на свойства top, right,
bottom и left.
Элемент с position: static; не позиционируется по-особенному;
он всегда располагается в соответствии с нормальным потоком страницы:
<div> имеет position: static;Пример CSS, который используется:
Позиция относительная
Элемент с position: relative; позиционируется относительно своего нормального положения.
Установка свойств top, right, bottom и
left относительно позиционируемого элемента приведет к регулировке от своего нормального положения.
Контент не будет установлен с любой стороны, элемента.
Пример CSS, который используется:
Позиция фиксированная
Элемент с position: fixed; позиционируется относительно окна просмотра,
что означает, что он всегда остается в том же месте, даже если страница прокручивается.
Свойства top, right, bottom и
left используются для установки элемента.
Фиксированный элемент не оставляет зазор на странице, где он обычно находится.
Обратите внимание на фиксированный элемент в нижнем правом углу страницы. Пример CSS, который используется:
Пример
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Попробуйте сами »
<div> имеет position: fixed;Позиция абсолютная
Элемент с 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 Упражнения
Все CSS свойства позиции
| Свойства | Описание |
|---|---|
| bottom | Устанавливает бокс по нижниму краю поля |
| clip | Подрезка абсолютной позиции элемента |
| left | Устанавливает бокс по левому краю поля |
| position | Устанавливает тип позиции для элемента |
| right | Устанавливает бокс по правому краю поля |
| top | Устанавливает бокс по верхнему краю поля |