css - 如何 "properly"在可滚动窗口上覆盖一个 div "view port"

Question

我需要在可滚动窗口的“视口(viewport)”的右上角覆盖一个 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 元素是 block 级的(因此宽度已经是 100%)。关于高度，您将需要它，因为未指定的 height 将基于 #window 元素的内容。通过指定 height: 100%，您的 #window 元素的高度将基于包含 block ，这允许 overflow 工作。

因此，据我所知，您的方法没有任何问题。

另一个答案提到了 position: fixed，但根据您的问题/要求，我认为 position: absolute 是正确的方法。 position: absolute 将相对于具有非默认位置值的祖先(即 position: static)，因此您的 #overlay将相对于 #parent)