Есть ли какая-либо документация, определяющая поведение по умолчанию для элемента с фиксированной позицией внутри элемента с относительной, абсолютной или статической позицией?
.parent {
position: relative; /* or absolute/static */
height: 200px;
width: 200px;
top: 30px;
left: 50px;
background-color: red;
}
.child {
position: fixed;
height: 100px;
width: 100px;
left: 10px;
top: 20px;
background-color: blue;
}<div class='parent'>
<div class='child'></div>
</div>Мой собственный опыт заключается в том, что он расположен относительно области просмотра браузера (если не используется преобразование или не указано left / top в дочернем элементе), но как я могу обосновать, что так должно быть всегда? Как узнать, отображается ли это в каких-либо браузерах по-другому? Возможно, размещение дочернего элемента относительно родителя или, возможно, не отображение элемента вообще ...
1 ответ
Положение родительского элемента или любого предка не имеет значения, когда дело доходит до position:fixed. Из спецификации:
Фиксированное позиционирование - это подкатегория абсолютного позиционирования. Единственное отличие состоит в том, что для фиксированного блока содержащий блок устанавливается окном просмотра .
Но есть некоторые особые случаи, когда содержащийся блок может измениться. Это происходит при использовании filter типа , который я объяснил здесь , transformтипа объяснено здесь и иногда will-change (объяснено здесь)
Что касается использования верхнего / левого / нижнего / правого положения, вам необходимо учитывать статическое положение. Если вы не установите ни одно из этих значений, браузер будет рассматривать статическое положение для размещения элемента. Еще из спецификации:
Для целей этого и следующего разделов термин «статическое положение» (элемента) относится, грубо, к положению, которое элемент занимал бы в нормальном потоке . Точнее ...
Элемент position:fixed всегда рассматривает область просмотра как содержащий его блок (ссылку для его размещения), если только на верхнем уровне не используются какие-либо определенные свойства (преобразование, фильтр и т. Д.). Положение этого элемента определяется либо верхним / левым / правым / нижним, либо статическим положением, как описано в спецификации.
Связанный вопрос, чтобы получить более подробную информацию о статическом положении: Почему мои абсолютно позиционированные элементы не расположены там, где я ожидал?
Похожие вопросы
Связанные вопросы
Новые вопросы
html
HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].
En Español