Нормальное позиционирование
Если для элемента свойство 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
См. также
- :focus на мобильных устройствах
- position
- position в CSS
- relative и absolute
- z-index
- Абсолютное позиционирование
- Виды ссылок
- Всплывающая подсказка
- Добавление тени
- Использование :hover
- Использование в вёрстке
- Липкое позиционирование
- Относительное позиционирование
- Переходы с помощью :hover
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Поток
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Свойства позиционирования
- Селекторы CSS
- Сочетание с псевдоклассами
- Фиксированное позиционирование
Создайте веб-страницу, показанную на рис. 1.
Рис. 1
Создайте ве-страницу, как показано на рис. 1.
Рис. 1