CSS Layout — свойство position
Свойство positionуказывает тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или фиксированный).
Позиция Собственность
Свойство positionуказывает тип метода позиционирования, используемого для элемента.
Существует пять различных значений положения:
staticrelativefixedabsolutesticky
Затем элементы позиционируются с использованием свойств top, bottom, left и right. Однако эти свойства не будут работать, пока position
свойство не будет задано первым. Они также работают по-разному в зависимости от значения позиции.
положение: статичное;
HTML-элементы по умолчанию позиционируются статично.
На статические позиционированные элементы не влияют свойства top, bottom, left и right.
Элемент with position: static;не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с обычным потоком страницы:
Вот используемый CSS:
Пример
div.static {
position: static;
border: 3px solid #73AD21;
}
положение: родственник;
Элемент с position: relative;позиционируется относительно своего нормального положения.
Установка свойств top, right, bottom и left элемента с относительным позиционированием приведет к тому, что он будет отрегулирован в сторону от своего нормального положения. Другой контент не будет скорректирован, чтобы заполнить любой пробел, оставленный элементом.
Вот используемый CSS:
Пример
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
положение: фиксированное;
Элемент с position: fixed;позиционируется относительно окна просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
Фиксированный элемент не оставляет зазора на странице там, где он обычно располагался бы.
Обратите внимание на фиксированный элемент в правом нижнем углу страницы. Вот используемый CSS:
Пример
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;положение: абсолютное;
Элемент с position: absolute;позиционируется относительно ближайшего позиционированного предка (а не позиционируется относительно окна просмотра, как фиксированный).
Тем не мение; если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.
Примечание. Элементы с абсолютным позиционированием удаляются из обычного потока и могут перекрывать элементы.
Вот простой пример:
Вот используемый 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;
}
положение: липкое;
Элемент with 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;
}
Позиционирование текста на изображении
Как расположить текст над изображением:
Пример
Попробуй сам:
Дополнительные примеры
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |