CSS position
Свойство position определяет тип метода позиционирования и используется для элемента,
имеет значения (static, relative,
fixed или absolute).
Свойство позиция
Свойство 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;
}
Редактор кода »
Перекрывающий элемент
Когда элементы расположены в окне просмотра дисплея, они могут перекрывать друг друга.
Свойство z-index определяет порядок элемента в стеке
(какой элемент должен быть помещен в передней части или за элементом)
Элемент может иметь положительное или отрицательное расположение стеки:
Заголовок
Так как изображение имеет z-index:1, оно будет помещено за текстом.
Элемент с большим порядком стека всегда находится перед элементом, с более низким порядком стека за элементом.
Примечание: Если два элемента расположенны без перекрытия z-index, указанный элемент
расположенный последним в коде HTML отображается вверху.
Расположение текста в изображении
Как разместить текст поверх изображения:
Пример
Редактор кода:
Сверху Слева » Сверху Справа » Cнизу Слева » Снизу Справа » По Центру »Еще примеры
Установить форму элемента
Этот пример показывает, как установить форму элемента. Элемент закрепляется в форму и отображается.
Проверьте себя с помощью упражнений!
Все CSS свойства позиции
| Свойства | Описание |
|---|---|
| position | Устанавливает тип позиции для элемента |
| bottom | Устанавливает бокс по нижниму краю поля |
| left | Устанавливает бокс по левому краю поля |
| right | Устанавливает бокс по правому краю поля |
| top | Устанавливает бокс по верхнему краю поля |
| clip | Подрезка абсолютной позиции элемента |
| z-index | Устанавливает порядок элемента в стеке "перед" или "за" |
