CSS Фиксированное положение | Kevin Chisholm
С фиксированным положением CSS элемент полностью удаляется из потока документа, но позиционируется абсолютно по отношению к порту просмотра. Затем вы можете использовать свойства «сверху», «снизу», «слева» и «справа», чтобы указать точное местоположение, в котором вы хотите это сделать.
Иногда вам может понадобиться поместить элемент в точное положение. То есть вы не хотите быть привязанным к естественному документообороту. Следование естественному потоку документов часто является лучшим способом, и важно помнить об этом. Но когда вы хотите взять элемент из потока документов и установить его в точном месте по отношению к порту просмотра, позиция фиксированная это инструмент для работы.
Фиксированное положение часто путают с абсолютным положением , но хотя их поведение несколько похоже, это не совсем одно и то же. Здесь важно отметить, что при абсолютной позиции имеет значение отношение между HTML-элементом и его потомками.
Для подробного обсуждения абсолютной позиции НАЖМИТЕ ЗДЕСЬ.
С фиксированной позицией нет проблем с отношениями между HTML-элементом и его потомками. Элемент HTML, который вы применяете к фиксированной позиции, полностью удаляется из потока документа и размещается относительно области просмотра. То есть этот элемент заботится только о том, где находится окно просмотра. Его потомков как будто просто не существует; оно не знает о них и не заботится о них. И как только вы установите фиксированное положение, вы можете использовать « сверху », « справа », « снизу » или « слева » для дальнейшего уточнения визуального положения элемента с фиксированным положением. Другими словами, эти верхние, правые, нижние и левые свойства позволяют указать, как элемент с фиксированной позицией смещается от окна просмотра.
Пример № 1
См.
демонстрацию Pen CSS Fixed Absolute | Front End Video от Front End Video (@frontendvideo) на CodePen.
В Примере №1 элемент с классом « child » имеет свойство CSS position , установленное на « fixed ». В результате элемент полностью удаляется из потока документов и позиционируется абсолютно по отношению к области просмотра. Поскольку на странице довольно много текста, вам необходимо прокрутить его, чтобы увидеть его весь. Обратите внимание, что при прокрутке элемент .child остается на месте и не перемещается вместе с прокруткой. Причина, по которой элемент .child появляется вверху, заключается в том, что его свойство top установлено на 0 . Это одно из самых популярных применений position:fixed ; то есть создание заголовка страницы, который не перемещается при прокрутке.
Пример # 2
См.
демо-версию Pen CSS Position Fixed | Front End Video от Front End Video (@frontendvideo) на CodePen.
Пример № 2 в основном идентичен примеру № 1. Единственное отличие состоит в том, что свойство top:0 элемента .child было изменено на: bottom: 0 . В результате элемент фиксируется на внизу окна просмотра. Обратите внимание, что при прокрутке элемент .child не смещается с нижней части. Обычно этот метод используется, когда вы видите пользовательский нижний колонтитул, который остается внизу страницы и не перемещается.
Резюме
Таким образом, при фиксированной позиции HTML-элемент полностью удаляется из потока документов. Не стоит беспокоиться о потомках этого элемента, потому что он расположен относительно окна просмотра. Затем можно использовать свойства «сверху», «справа», «снизу» и «слева», чтобы «подтолкнуть» элемент дальше, что означает, что вы можете определить, как элемент «фиксируется» в окне просмотра и где он должен отображаться.
.
html — Позиция: фиксированный элемент в пределах позиции: относительный родитель. Какой браузер отображает правильно?
Интересный случай. Давайте углубимся в спецификации, чтобы узнать, что происходит.
TL;DR: Спецификация W3 критически расплывчата/не определена в этой области, но похоже, что все браузеры отклоняются от спецификации, или, по крайней мере, они приняли решение, где детали не определены. Однако четыре основных браузера (Firefox, Chrome, IE и Opera) объединяет то, что все они, похоже, отклоняются от спецификации 9.0061 аналогично . Сафари определенно странный человек здесь.
Вот что говорит спецификация CSS2.1 в главе 9: Модель визуального форматирования:
- 9.1.2 Содержащие блоки — В CSS 2.1 многие положения и размеры блоков рассчитываются относительно краев прямоугольного блока, называемого содержащим блоком. В общем, сгенерированные блоки действуют как содержащие блоки для блоков-потомков; мы говорим, что ящик «устанавливает» содержащий его блок для своих потомков.
Фраза «содержащий блок блока» означает «содержащий блок, в котором находится блок», а не тот, который он генерирует.
Это просто определяет, что такое содержащий блок.
- 9.3 Схемы позиционирования — Абсолютное позиционирование: В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается положение относительно содержащего его блока.
Это говорит о том, что абсолютно позиционированных элементов расположены относительно содержащего блока.
- 9.6 Абсолютное позиционирование — В модели абсолютного позиционирования блок явно смещен относительно содержащего его блока. […] Ссылки в этой спецификации на абсолютно позиционированный элемент (или его блок) подразумевают, что свойство
positionэлемента имеет значениеabsoluteилиfixed.
Это говорит о том, что абсолютно позиционированных элементов включают position:fixed; элементов, а также позиция: абсолютная; элементов.
- 9.6.1 Фиксированное позиционирование — Фиксированное позиционирование является подкатегорией абсолютного позиционирования. Единственное отличие состоит в том, что для блока с фиксированной позицией содержащий блок устанавливается окном просмотра.
А это говорит позиция: фиксированная; Элементы имеют область просмотра (ну, не буквально область просмотра, а поле с теми же размерами и позициями, что и окно просмотра) в качестве содержащего их поля. Позже это подтверждается спецификацией в
Если элемент имеет «положение: фиксированное», содержащий блок устанавливается окном просмотра […]
(Если вы не знакомы с тем, что такое область просмотра, это «окно или другая область просмотра на экране, через которую пользователи просматривают документ».
Размеры области просмотра являются основой для начального блока , содержащего блок . весь ваш HTML-контент ( , и т. д.) находится внутри этого начального содержащего блока, определенного окном просмотра.)
Следовательно, элемент Теперь, когда первый шаг определения свойств элемента Спецификация CSS2.1 говорит следующее: Это говорит нам о том, что для абсолютно позиционированных элементов ( Это просто подтверждает тот факт, что Хотя в нескольких местах говорится, что если два противоположных значения смещения равны Выравнивает объект выравнивания на одном уровне с начальным краем контейнера выравнивания. Это должно означать, что элемент расположен в верхнем левом углу содержащего блока, что для : fixed; , примененный к нему, должен иметь содержащий блок, равный Viewport, или начальный содержащий блок . .nav завершен, мы можем определить, как должны вести себя браузеры.
Положение блока будет определяться свойствами «сверху», «справа», «снизу» и «слева» и содержащим его блоком. position: absolute; ), любые свойства float игнорируются, элементов display: block; , и что элемент позиционируется в соответствии со значениями смещения блока сверху , справа , снизу , и/или слева в сочетании с начальным содержащим блоком (окном просмотра).
auto , то они устанавливаются равными нулю, CSS2.1, похоже, не указывает случай, как позиционировать элементы с обоими слева и справа значения нулевые. Модуль выравнивания CSS Box Level 3 , однако, упоминает, что значение установлено на «start», которое определяется как: position: fixed; элементов, должны быть такими же, как и окно просмотра. Однако мы видим, что для всех основных браузеров, это не . Нет основных браузеров, похоже, устанавливают положение : исправлено; , содержащий блок, к блоку окна просмотра, как указано в спецификации.