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

Если задать значение 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>

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

Создайте веб-страницу, как показано на рис. 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>

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

Автор: Влад Мержевич

Последнее изменение: 13.08.2017

Редакторы: Влад Мержевич