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 "

Ульти-кирпичи страницы: всё о применении ul на сайте
Delete SQL - основные способы удаления данных из таблицы
isdigit - функция в языке программирования Python
Форматирование данных в Python
PHP Остаток от деления: как использовать функцию и получать результаты
Калькулятор Паскаля онлайн: удобный и быстрый способ решения математических задач
GitLab API: управление вашими проектами через программный интерфейс
Размер массива C: всё, что вам нужно знать
Задача про белок и орехи - решение и объяснение
<h1>JavaScript Substring