CSS Макет. Свойство position
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
Свойство position определяет тип метода позиционирования, используемого для элемента (статический, относительный, фиксированный, абсолютный или прикрепленный).
Свойство position
Свойство position определяет тип метода позиционирования, используемого для элемента.
Есть пять разных значений position (позиции):
static- статическиrelative- относительноfixed- фиксированноabsolute- абсолютноsticky- прикрепленно
Затем элементы располагаются с использованием свойств top, bottom, left и right. Однако эти свойства не будут работать, если сначала не установлено свойство position. Они также работают по-разному в зависимости от значения position.
position: static;
HTML-элементы по умолчанию расположены статически.
На статические элементы не влияют свойства top, bottom, left и right.
Элемент со значением position: static; не позиционируется каким-либо особым образом; он всегда располагается в соответствии с обычным потоком страницы:
Вот CSS, который используется:
position: relative;
Элемент со значением position: relative; расположен относительно своего нормального положения.
Установка свойств top, right, bottom и left относительно позиционированного элемента приведет к его отклонению от его нормального положения. Другое содержимое не будет откорректировано, чтобы вписаться в любой пробел, оставленный элементом.
Вот CSS, который используется:
Пример
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
Попробуйте сами »
В данном примере элемент <div> имеет отступ слева 30px, в результате чего он сдвигается влево на 30 пикселей, при этом справа выходит на другое содержимое страницы.
position: fixed;
Элемент со значением 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;
Элемент со значением 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;
Элемент со значением position: sticky; позиционируется на основе позиции прокрутки пользователя.
Прикреплённый элемент переключается между relative и fixed, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет достигнута заданная позиция смещения - тогда он «залипнет» на месте (например position:fixed).
Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают sticky позиционирование. Safari требует префикса -webkit- (см. пример ниже). Также необходимо указать хотя бы одно из значений top, right, bottom или left для работы sticky позиционирования.
В этом примере sticky элемент придерживается верхней части страницы (top: 0), когда вы достигнете указанной позиции с помощью прокрутки страницы.
Пример
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Попробуйте сами »
Перекрывающиеся элементы
Когда элементы позиционируются, они могут перекрывать другие элементы.
Свойство z-index определяет порядок стека элемента (какой элемент должен быть расположен перед или позади других).
Элемент может иметь положительный или отрицательный порядок в стеке:
Это заголовок
Поскольку изображение имеет z-index -1, оно будет помещено за текстом.
Элемент с более высоким порядком стека всегда находится перед элементом с более низким порядком стека, т.е. находится как бы сверху над предыдущим элементом.
Примечание: Если два позиционированных элемента перекрываются без указания z-index, элемент, расположенный последним в коде HTML, будет показан сверху.
Позиционирование текста в изображении
Как разместить текст поверх изображения:
Пример
Попробуйте сами:
Top Left » Top Right » Bottom Left » Bottom Right » Centered »Больше примеров
Установка формы элемента
В этом примере демонстрируется, как установить форму элемента. Элемент обрезается до этой формы и отображается.
Проверьте себя с помощью упражнений!
Все CSS свойства позиционирования
| Свойство | Описание |
|---|---|
| bottom | Устанавливает нижний край поля для позиционированного блока (отступ снизу) |
| clip | Закрепляет абсолютно позиционированный элемент |
| left | Устанавливает край левого поля для позиционированного блока (отступ слева) |
| position | Определяет тип позиционирования для элемента |
| right | Устанавливает правый край поля для позиционированного блока (отступ справа) |
| top | Устанавливает верхний край поля для позиционированного блока (отступ сверху) |
| z-index | Устанавливает порядок стека элемента |