Дочерний элемент расположен неподвижно относительно области просмотра

Question

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

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

Answer 1

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

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

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

---

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

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

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

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