relative и absolute

Обычно относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 1).

Значения свойств left, right, top и bottom для вложенного элемента

Рис. 1. Значения свойств left, right, top и bottom для вложенного элемента

Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются. В примере 1 прямоугольник располагается в правом нижнем углу блока возле границы.

Пример 1. Использование position

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Положение элемента</title>
  <style>
   .block-1 {
    position: relative; /* Относительное позиционирование */
    background: #3989c9; /* Синий цвет фона */
    min-height: 160px; /* Минимальная высота */
    padding: 20px; /* Поля */
    border: 2px solid #000; /* Параметры границы */
   }
   .block-2 {
    position: absolute; /* Абсолютное позиционирование */
    right: 0; bottom: 0; /* Положение элемента */
    background: #feea3f; /* Жёлтый цвет фона */
    width: 50px; height: 50px; /* Размеры элемента */
   }
  </style>
 </head>
 <body>
  <div class="block-1">
   <div class="block-2"></div>
  </div>
 </body>
</html>

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

Положение вложенного элемента относительно родителя

Рис. 2. Положение вложенного элемента относительно родителя

Для родителя допустимо указывать значение relative, absolute, fixed или sticky. Если у дочернего элемента свойство position задано как absolute, то отсчёт координат ведётся от родителя. В примере 2 показано сочетание абсолютного позиционирования для размещения даты в левом верхнем углу фотографии.

Пример 2. Использование absolute

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вывод даты</title>
  <style>
   figure, .pub {
    position: absolute; /* Абсолютное позиционирование */
   }
   .pub {
    background: #3989c9; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    left: 10px; top: 10px; /* Положение даты */
    text-align: center; /* Выравнивание по центру */
    padding: 5px 10px; /* Поля вокруг текста */
    min-width: 40px; /* Минимальная ширина */
    border: 2px solid #fff; /* Параметры рамки */
   }
   .date {
    font-size: 28px; /* Размер шрифта */
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="image/blueberry.jpg" alt="Голубика">
   <div class="pub">
    <div class="date">15</div>
    <div class="month">авг</div>
   </div>
  </figure> 
 </body>
</html>

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

Вывод даты в левом верхнем углу

Рис. 3. Вывод даты в левом верхнем углу

Сочетание относительного и абсолютного позиционирования можно применять и к псевдоэлементам ::before и ::after. Это сокращает размер кода HTML, поскольку нам уже не нужны лишние элементы, и позволяет делать всякие интересные декоративные эффекты. В примере 3 показано создание всплывающей подсказки.

Пример 3. Создание всплывающей подсказки

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Всплывающая подсказка</title>
  <style>
   [data-tooltip] {
    position: relative; /* Относительное позиционирование */
   }
   /* Выводим треугольник */
   [data-tooltip]:hover::before {
    content: '';
    position: absolute;
    top: 1.4em; left: 20px;
    width: 0; height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #3989c9;
   } 
   /* Выводим саму подсказку */
   [data-tooltip]:hover::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    width: 400px; /* Ширина подсказки */
    left: 0; top: 2em; /* Положение подсказки */
    background: #3989c9; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0.5em; /* Поля вокруг текста */
    border-radius: 5px; /* Скругляем уголки */
   }
  </style>
 </head>
 <body>
  <p>Текст до строки.</p>
  <p data-tooltip="Всплывающая подсказка сообщает о чём-то многозначном и полезном...">
   Наведи сюда курсор.</p>
  <p>Текст после строки.</p>
 </body>
</html>

Текст самой подсказки мы пишем в пользовательском атрибуте data-tooltip и выводим его с помощью свойства content со значением attr(data-tooltip). Остальной код CSS используется для оформления этого текста (рис. 4).

Вид всплывающей подсказки

Рис. 4. Вид всплывающей подсказки

Перейти к заданиям

relative и absolute

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

Рис. 1

Файлы

cocktail.jpg

cocktail-2.jpg

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотография коктейля</title>
  <style>
   body {
    background: #f7f6f2;
   }
   .cocktail {
    display: inline-block;
    padding: 12px;
    margin: 0;
    position: relative;
    overflow: hidden;
   }
   .cocktail::after, .cocktail::before {
    content: '';
    position: absolute;
    z-index: 2;
    width: 70px;
    height: 70px;
    left: -40px;
    bottom: -40px;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    outline: #c2b59d dashed 1px;
    outline-offset: -3px;
    background: #f7f6f2;
   }
   .cocktail::after {
    left: auto;
    right: -40px;
    top: -40px;
   }
   .cocktail img {
    display: block;
    padding: 4px;
    background: #dad6cf;
    border: 2px solid #c2b59d;
   }
  </style>
 </head>
 <body>
  <figure class="cocktail">
   <img src="image/cocktail.jpg" width="200" height="200" alt="Коктейль">
  </figure> 
  <figure class="cocktail">
   <img src="image/cocktail-2.jpg" width="200" height="200" alt="Коктейль">
  </figure> 
 </body>
</html>

relative и absolute 2

Создайте веб-страницу, показанную на рис. 1. Поверх фотографии в правом нижнем углу выводится картинка с полупрозрачным фоном (прозрачность 50%).

Рис. 1

Файлы

dessert.jpg

expand.png

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Увеличить фото</title>
  <style>
   figure {
    position: relative;
    display: inline-block;
   }
   img { display: block; }
   .expand {
     position: absolute;
     width: 30px;
     height: 30px;
     right: 15px;
     bottom: 15px;
     padding: 5px;
     background: rgba(255, 255, 255, 0.5) url(/example/image/expand.png) 50% 50% no-repeat;
     background-size: 30px;
     border: 1px solid #333;
   }
  </style>
 </head>
 <body>
  <figure>
   <img src="image/dessert.jpg" alt="Десерт">
   <a href="#" class="expand"></a>
  </figure>
 </body>
</html>