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

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

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

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

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

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

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

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

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

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

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