Есть ли какая-либо документация, определяющая поведение по умолчанию для элемента с фиксированной позицией внутри элемента с относительной, абсолютной или статической позицией?

.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 в дочернем элементе), но как я могу обосновать, что так должно быть всегда? Как узнать, отображается ли это в каких-либо браузерах по-другому? Возможно, размещение дочернего элемента относительно родителя или, возможно, не отображение элемента вообще ...

2
johann1301s 22 Окт 2019 в 03:44

1 ответ

Лучший ответ

Положение родительского элемента или любого предка не имеет значения, когда дело доходит до position:fixed. Из спецификации:

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

Но есть некоторые особые случаи, когда содержащийся блок может измениться. Это происходит при использовании filter типа , который я объяснил здесь , transformтипа объяснено здесь и иногда will-change (объяснено здесь)


Что касается использования верхнего / левого / нижнего / правого положения, вам необходимо учитывать статическое положение. Если вы не установите ни одно из этих значений, браузер будет рассматривать статическое положение для размещения элемента. Еще из спецификации:

Для целей этого и следующего разделов термин «статическое положение» (элемента) относится, грубо, к положению, которое элемент занимал бы в нормальном потоке . Точнее ...

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

Связанный вопрос, чтобы получить более подробную информацию о статическом положении: Почему мои абсолютно позиционированные элементы не расположены там, где я ожидал?

2
Temani Afif 22 Окт 2019 в 00:59