CSS Layout - The position Property
Свойство position
указывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или липкий).
Свойство Position
Свойство position
указывает тип метода позиционирования, используемого для элемента.
Существует пять различных значений позиции:
static
relative
fixed
absolute
sticky
Затем элементы раздаются с помощью свойств "верх", "снизу", "влево" и "вправо". Однако эти свойства не будут работать, если только свойство position
не задано первым. Они также работают по-разному в зависимости от значения положения.
позиция: статическая;
Элементы HTML по умолчанию позиционируют статический.
На статические позиционные элементы не влияют верхние, нижние, левые и правые свойства.
Элемент с position: static;
не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с нормальным потоком страницы:
Вот CSS, который используется:
Пример
div.static {
position: static;
border: 3px solid #73AD21;
}
позиция: относительная;
Элемент с position: relative;
располагается относительно его нормального положения.
Установка верхнего, правого, нижнего и левого свойств относительно расположенного элемента приведет к Он должен быть отрегулирован от своего нормального положения. Другое содержимое не будет скорректировано, чтобы уместиться в зазор, оставленный элементом.
Вот CSS, который используется:
Пример
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
позиция: фиксированная;
Элемент с position: fixed;
располагается относительно видового экрана, что означает, что он всегда остается в том же месте, даже если страница прокручивается. Свойства сверху, справа, снизу и слева используются для размещения элемента.
Фиксированный элемент не оставляет зазора на странице, где он обычно находился.
Обратите внимание на фиксированный элемент в правом нижнем углу страницы. Вот CSS, который используется:
Пример
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
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
, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в видовом экране не будет выполнено положение смещения, после чего оно "вставляется" (например, положение: фиксированное).
Примечание: Internet Explorer, EDGE 15 и более ранние версии не поддерживают липкое позиционирование. Safari требует a-WebKit-префикс (см. пример ниже). Вы также должны указать по крайней мере один из top
, right
, bottom
или left
для липкого позиционирования для работы.
В этом примере липкий элемент вставляется в верхнюю часть страницы ( top: 0
), когда вы достигаете его положение прокрутки.
Пример
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Перекрывающиеся элементы
При позиционировании элементов они могут перекрывать другие элементы.
Свойство z-index
указывает порядок стека элемента (какой элемент должен быть помещен перед, или позади, другие).
Элемент может иметь положительный или отрицательный порядок стека:
This is a heading
Because the image has a z-index of -1, it will be placed behind the text.
Пример
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Элемент с большим порядком стека всегда находится перед элементом с более низким порядком стека.
Примечание: Если два позиционных элемента перекрываются без заданного z-index
, то элемент, расположенный последним в HTML-коде, будет отображаться сверху.
Размещение текста в изображении
Как разместить текст над изображением:
Пример
Попробуйте сами:
Другие примеры
Задание формы элемента
В этом примере демонстрируется установка формы элемента. Элемент обрезается в эту фигуру и отображается.
Все свойства позиционирования CSS
Свойство | Описание |
---|---|
bottom | Задание нижнего края поля для позиционного прямоугольника |
clip | Зажимы абсолютно позиционированного элемента |
left | Задание левого края поля для позиционного прямоугольника |
position | Определяет тип позиционирования для элемента |
right | Устанавливает правый край поля для позиционного прямоугольника |
top | Задание верхнего края поля для позиционного прямоугольника |
z-index | Задает порядок стека элемента |