Html position fixed: background-position | htmlbook.ru

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: Модель визуального форматирования:

  1. 9.1.2 Содержащие блоки — В CSS 2.1 многие положения и размеры блоков рассчитываются относительно краев прямоугольного блока, называемого содержащим блоком. В общем, сгенерированные блоки действуют как содержащие блоки для блоков-потомков; мы говорим, что ящик «устанавливает» содержащий его блок для своих потомков.
    Фраза «содержащий блок блока» означает «содержащий блок, в котором находится блок», а не тот, который он генерирует.

Это просто определяет, что такое содержащий блок.

  1. 9.3 Схемы позиционирования — Абсолютное позиционирование: В модели абсолютного позиционирования блок полностью удаляется из нормального потока и ему присваивается положение относительно содержащего его блока.

Это говорит о том, что абсолютно позиционированных элементов расположены относительно содержащего блока.

  1. 9.6 Абсолютное позиционирование — В модели абсолютного позиционирования блок явно смещен относительно содержащего его блока. […] Ссылки в этой спецификации на абсолютно позиционированный элемент
    (или его блок) подразумевают, что свойство position элемента имеет значение absolute или fixed .

Это говорит о том, что абсолютно позиционированных элементов включают position:fixed; элементов, а также позиция: абсолютная; элементов.

  1. 9.6.1 Фиксированное позиционирование — Фиксированное позиционирование является подкатегорией абсолютного позиционирования. Единственное отличие состоит в том, что для блока с фиксированной позицией содержащий блок устанавливается окном просмотра.

А это говорит позиция: фиксированная; Элементы имеют область просмотра (ну, не буквально область просмотра, а поле с теми же размерами и позициями, что и окно просмотра) в качестве содержащего их поля. Позже это подтверждается спецификацией в

10.1 Определение содержащего блока :

Если элемент имеет «положение: фиксированное», содержащий блок устанавливается окном просмотра […]

(Если вы не знакомы с тем, что такое область просмотра, это «окно или другая область просмотра на экране, через которую пользователи просматривают документ». Размеры области просмотра являются основой для начального блока , содержащего блок . весь ваш HTML-контент ( , и т. д.) находится внутри этого начального содержащего блока, определенного окном просмотра.)

Следовательно, элемент

с позицией : fixed; , примененный к нему, должен иметь содержащий блок, равный Viewport, или
начальный содержащий блок
.


Теперь, когда первый шаг определения свойств элемента .nav завершен, мы можем определить, как должны вести себя браузеры.

Спецификация CSS2.1 говорит следующее:

  1. 9.7 Отношения между «отображением», «позицией» и «плавающей точкой» — В противном случае, если «позиция» имеет значение «абсолютное» или «фиксированное», блок позиционируется абсолютно, вычисленное значение «плавающей» установлено значение «нет», а отображение настроено в соответствии с таблицей ниже. Положение блока будет определяться свойствами «сверху», «справа», «снизу» и «слева» и содержащим его блоком.

Это говорит нам о том, что для абсолютно позиционированных элементов (

position: fixed; или position: absolute; ), любые свойства float игнорируются, элементов
(среди прочего) установлены на display: block; , и что элемент позиционируется в соответствии со значениями смещения блока сверху , справа , снизу , и/или слева в сочетании с начальным содержащим блоком (окном просмотра).

  1. 9.3.2 Смещения рамки: «сверху», «справа», «снизу», «слева» — Элемент считается позиционированным, если его свойство position имеет значение, отличное от static. Позиционированные элементы генерируют позиционированные блоки, расположенные в соответствии с четырьмя свойствами: сверху, справа, снизу, слева.

Это просто подтверждает тот факт, что

должен располагаться в соответствии со смещением блока.

Хотя в нескольких местах говорится, что если два противоположных значения смещения равны auto , то они устанавливаются равными нулю, CSS2.1, похоже, не указывает случай, как позиционировать элементы с обоими слева и справа значения нулевые. Модуль выравнивания CSS Box Level 3 , однако, упоминает, что значение установлено на «start», которое определяется как:

Выравнивает объект выравнивания на одном уровне с начальным краем контейнера выравнивания.

Это должно означать, что элемент расположен в верхнем левом углу содержащего блока, что для position: fixed; элементов, должны быть такими же, как и окно просмотра. Однако мы видим, что для всех основных браузеров, это не . Нет основных браузеров, похоже, устанавливают положение : исправлено; , содержащий блок, к блоку окна просмотра, как указано в спецификации.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *