как "правильно" наложить div на прокручиваемое окно "view port"

Question

Мне нужно наложить div в правом верхнем углу «порта просмотра» прокручиваемого окна - или таким образом, чтобы при прокрутке заднего окна наложение оставалось на месте

https://jsfiddle.net/zgjk1xvh/

^ это работает (обратите внимание, что оверлей не перемещается при прокрутке), но я не думаю, что это правильный способ сделать это.width: 100% и height: 100% не кажутся нормальными

здесь это тоже:

<div id="parent">
  <div id="window">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  </div>
  <div id="overlay">
    <p>[[ my overlay ]]</p>
  </div>
</div>

#parent {
  position: relative;
  height: 220px;
  width: 220px;
}

#window {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: grey;
}

#overlay {
  position: absolute;
  background-color: red;
  top: 0;
  right: 0;
}

Answer 1

Ваш подход работает. width: 100% не требуется, так как ваш элемент #window имеет блочный уровень (поэтому будет иметь ширину уже 100%). Что касается высоты, она вам понадобится, так как неопределенный height будет основан на содержимом элемента #window. Указав height: 100%, высота вашего элемента #window будет основана на содержащем блоке, что позволяет overflow работать.

Итак, из того, что я могу сказать, нет ничего плохого в вашем подходе.

В другом ответе упоминается position: fixed, но, основываясь на вашем вопросе / требованиях, я думаю, position: absolute - правильный подход. position: absolute будет относиться к предку со значением позиции, отличным от значения по умолчанию (то есть position: static), и, таким образом, ваш #overlay будет относительно #parent)

Answer 2

Поскольку position: absolute; будет относиться к следующему элементу-предку, который имеет position: relative;, безопаснее использовать position: fixed;, чтобы зафиксировать положение относительно области просмотра.

(в вашем случае абсолют работает только так, как задумано, поскольку нет относительного предка, поэтому absolute относится к элементу html)