Нормальное позиционирование

Комментарии

Если для элемента свойство position не задано или его значение явно указано как static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML. static — это значение свойства position по умолчанию, иными словами, если вы не задали для элемента position, то оно считается браузером как static.

Формально, static не является типом позиционирования, это естественное исходное состояние любого элемента. Таким образом, термины «нормальное позиционирование», «обычное позиционирование», «статичное позиционирование», «статичный элемент» указывают лишь на значение static у свойства position, поскольку позиционирования как такового нет и элемент остаётся на своём начальном месте.

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

элементы на веб-странице выводятся в том порядке, как они описаны в коде HTML;
свойства left, right, top и bottom не дают никакого эффекта;
свойство z-index не работает.

В примере 1 показан вывод трёх элементов с нормальным позиционированием.

Пример 1. Вывод элементов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>static</title>
  <style>
   .box {
    min-height: 60px; /* Минимальная высота */
    margin-bottom: 10px; /* Отступ снизу */
   }
   .box-1 {
    background: #CE242B; /* Красный фон */
   }
   .box-2 {
    background: #009D4B; /* Зелёный фон */
   }
   .box-3 {
    background: #3989C9; /* Синий фон */
   }
  </style>
 </head>
 <body>
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
 </body>
</html>

В данном примере в коде HTML перечислены элементы с классами box-1, box-2, box-3, они выводятся на веб-странице в этом же порядке (рис. 1).

Вывод элементов с нормальным позиционированием

Рис. 1. Вывод элементов с нормальным позиционированием

Само по себе значение static применяется редко, поскольку является значением по умолчанию и не требует явного указания. Оно используется на практике лишь для возврата свойства position к начальному значению. В примере 2 для элемента задано относительное позиционирование и оно сдвинуто вниз от своего исходного положения. Псевдокласс :hover отменяет относительное позиционирование и элемент возвращается в исходное положение, если навести на него курсор.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>static</title>
  <style>
   .box-1 {
    background: #CE242B; /* Красный фон */
    min-height: 60px; /* Минимальная высота */
    position: relative; /* Относительное позиционирование */
    top: 20px; /* Расстояние сверху */
   }
   .box-1:hover {
    position: static; /* Статичное позиционирование */
   }
  </style>
 </head>
 <body>
  <div class="box-1"></div>
 </body>
</html>

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

См. также