Position CSS: Управляем расположением элементов на странице
CSS свойство position определяет способ позиционирования элемента на веб-странице. Оно позволяет изменять местоположение элемента относительно его родительского контейнера или относительно всего окна браузера.
Значения свойства position могут быть:
- static: это значение по умолчанию для всех элементов. Элементы со свойством position: static располагаются в порядке, указанном в HTML-коде, и игнорируют любые другие значения свойств top, bottom, left и right.
- relative: элемент со значением position: relative может быть сдвинут на определенное расстояние от его исходной позиции с помощью свойств top, bottom, left и right. Исходная позиция элемента сохраняется, поэтому другие элементы не смещаются.
- absolute: элемент со значением position: absolute позиционируется относительно ближайшего позиционированного контейнера (родительского элемента), имеющего значение не static. Если такого контейнера нет, то элемент позиционируется относительно всего окна браузера. Значения свойств top, bottom, left и right определяют точное местоположение элемента.
- fixed: это значение свойства позиционирует элемент относительно всего окна браузера. Он не будет двигаться при скроллинге страницы. Значения top, bottom, left и right определяют точное местоположение элемента.
Примеры кода:
HTML:
CSS:
.example {
position: relative; /* задаем значение position: relative */
top: 20px; /* сдвигаем элемент на 20px вниз от исходной позиции */
left: 50px; /* сдвигаем элемент на 50px вправо от исходной позиции */
}
Данный пример сдвигает содержимое блока на 20px вниз и на 50px вправо относительно его исходной позиции.
HTML:
CSS:
.container {
position: relative; /* задаем значение position: relative */
}
.box {
position: absolute; /* задаем значение position: absolute */
top: 0; /* элементы будут позиционироваться в верхнем левом углу родительского контейнера */
left: 0;
}
.box:nth-child(2) {
top: 50px; /* второй элемент будет сдвинут на 50px вниз */
}
.box:nth-child(3) {
left: 50px; /* третий элемент будет сдвинут на 50px вправо */
}
Данный пример позиционирует три блока относительно родительского контейнера с помощью значения position: absolute. Второй блок сдвинут на 50px вниз, а третий блок сдвинут на 50px вправо.
HTML:
CSS:
.header {
position: fixed; /* фиксированное позиционирование */
top: 0; /* располагаем вверху страницы */
left: 0;
width: 100%; /* занимаем всю ширину экрана */
background-color: grey;
color: white;
padding: 10px;
}
.content {
padding: 50px; /* добавляем отступ, чтобы текст не находился под фиксированным заголовком */
}
.footer {
position: fixed; /* фиксированное позиционирование */
bottom: 0; /* располагаем внизу страницы */
left: 0;
width: 100%; /* занимаем всю ширину экрана */
background-color: grey;
color: white;
padding: 10px;
}
Данный пример фиксирует заголовок и футер страницы при скроллировании содержимого страницы. Заголовок располагается наверху страницы, а футер - внизу. Содержимое страницы имеет отступ, чтобы текст не находился под фиксированным заголовком.