Относительное позиционирование

Если задать значение relative для свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз (рис. 1), отрицательное — сдвиг вверх.

Значения свойств left и top при относительном позиционировании

Рис. 1. Значения свойств left и top при относительном позиционировании

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 2). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Значения свойств right и bottom при относительном позиционировании

Рис. 2. Значения свойств right и bottom при относительном позиционировании

Для относительного позиционирования характерны следующие особенности:

  • элемент можно смещать относительно исходного положения с помощью свойств left, right, top и bottom;
  • при смещении элемента относительно исходного положения, место, которое занимал элемент, остаётся пустым и не заполняется ниже или вышележащими элементами;
  • если сдвинуть элемент вправо за пределы окна браузера, то появится горизонтальная полоса прокрутки;
  • если сдвинуть элемент вниз за пределы окна браузера, то появится вертикальная полоса прокрутки;
  • смещение элемента влево и вверх за пределы окна браузера не оказывает влияния на полосы прокрутки;
  • работает свойство z-index;
  • этот тип позиционирования неприменим к элементам таблицы вроде ячеек, строк, колонок и др.

В примере 1 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 1. Заголовок текста

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок</title> <style> h1 { font: normal 2em Arial, Tahome, sans-serif; /* Параметры шрифта */ background: #3989c9; /* Синий цвет фона */ color: #fff; /* Белый цвет текста */ padding: 0 1rem; /* Поля вокруг заголовка */ overflow: hidden; /* Скрываем всё за пределами заголовка */ } h1 span { position: relative; /* Относительное позиционирование */ top: 0.48rem; /* Сдвигаем вниз */ } </style> </head> <body> <h1><span>Аз и буки шрифтовой науки</span></h1> <p>Шрифт это средство выражения дизайна, а не какого-то банального чтения.</p> </body> </html>

Результат данного примера показан на рис. 3.

Сдвиг текста относительно исходного положения

Рис. 3. Сдвиг текста относительно исходного положения

Относительное позиционирование часто применяется для создания анимации и эффектов, связанных со сдвигом элементов. В примере 2 с помощью элемента <button> добавляется кнопка с тенью, при наведении курсора на кнопку она смещается вправо и вниз на величину тени, а сама тень при этом прячется. Всё это в комплексе придаёт кнопке трёхмерный эффект.

Пример 2. Сдвиг кнопки

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> button { background: #CE242B; /* Красный фон */ color: #fff; /* Белый цвет текста */ border: none; /* Убираем рамку */ padding: .7rem 2rem; /* Поля вокруг текста */ box-shadow: 5px 5px 0 #000; /* Параметры тени */ position: relative; /* Относительное позиционирование */ left: 0; /* Положение слева */ top: 0; /* Положение сверху */ transition: 1s; /* Время анимации */ } button:hover { left: 5px; /* Положение слева */ top: 5px; /* Положение сверху */ box-shadow: 0 0 0 #000; /* Параметры тени */ } </style> </head> <body> <button>Кнопка</button> </body> </html>

Наведите курсор на кнопку, чтобы увидеть анимацию в действии. Время движения кнопки определяется свойством transition.

Для относительно позиционированных элементов работает свойство z-index, которое управляет положением элементов по оси Z. Если требуется задать наложение элементов относительно друг друга, то в стилях достаточно указать position со значением relative без смещения самого элемента. В примере 3 выводятся картинки, при наведении на них курсора они увеличиваются в размерах и отображаются поверх остальных изображений.

Пример 3. Использование z-index

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style> img { border: 1px solid #ce242b; /* Параметры рамки */ position: relative; /* Относительное позиционирование */ transition: 1s; /* Время анимации */ } img:hover { z-index: 10; /* Поверх всех картинок */ transform: scale(1.2); /* Масштабирование на 20% */ } </style> </head> <body> <img src="image/thumb1.jpg" alt=""> <img src="image/thumb2.jpg" alt=""> <img src="image/thumb3.jpg" alt=""> </body> </html>

Создайте веб-страницу, показанную на рис. 1. Линии по бокам заголовка должны тянуться, независимо от размера окна браузера.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блок с заголовком</title> <style> .block { background: #795548; padding: 20px; color: #fff; font-family: Arial, sans-serif; } .block h2 { color: #feea3b; overflow: hidden; font-weight: normal; margin-top: 0; text-align: center; } .block h2::before, .block h2::after { content: ''; background: #feea3b; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .block h2::before { right: 10px; margin-left: -50%; } .block h2::after { left: 10px; margin-right: -50%; } </style> </head> <body> <section class="block"> <h2>Апперцепция</h2> <p>Гештальт, как бы это ни казалось парадоксальным, понимает культурный комплекс, к тому же этот вопрос касается чего-то слишком общего.</p> </section> </body> </html>

Создайте веб-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Наложение</title> <style> body { background: #f7f6f2; margin: 0; } .bg { min-height: 200px; background: #a1bd57; } .content { width: 400px; min-height: 250px; margin: auto; background: #fff; border: 3px solid #dad6cf; position: relative; top: -100px; } </style> </head> <body> <div class="bg"></div> <div class="content"></div> </body> </html>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 01.06.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты