Position CSS: Управляем расположением элементов на странице

CSS свойство position определяет способ позиционирования элемента на веб-странице. Оно позволяет изменять местоположение элемента относительно его родительского контейнера или относительно всего окна браузера.

Значения свойства position могут быть:

Примеры кода:

HTML:

Пример текста

CSS:

.example {

position: relative; /* задаем значение position: relative */

top: 20px; /* сдвигаем элемент на 20px вниз от исходной позиции */

left: 50px; /* сдвигаем элемент на 50px вправо от исходной позиции */

}

Данный пример сдвигает содержимое блока на 20px вниз и на 50px вправо относительно его исходной позиции.

HTML:

Бокс 1

Бокс 2

Бокс 3

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;

}

Данный пример фиксирует заголовок и футер страницы при скроллировании содержимого страницы. Заголовок располагается наверху страницы, а футер - внизу. Содержимое страницы имеет отступ, чтобы текст не находился под фиксированным заголовком.

Похожие вопросы на: "position css "

Inner Join: что это такое и как использовать в SQL?
Yahoo Maps - надежный путеводитель для ваших поездок
Минимальное введение в Python
JS: Конвертация числа в строку
Map методы c: как использовать для упрощения работы с данными
Как подключить jQuery на сайт: шаг за шагом инструкция
The Movie Database (TMDb) - ваш путеводитель в мире кинематографа
Как использовать rowspan в HTML таблицах: советы и примеры
Shutil Python: Руководство по использованию библиотеки
<h1>Python Join List - Simple Guide for Joining Lists in Python