css - 滚动 div 内的固定 block

Question

我有一个文本 block ，当文本足够大时它会滚动。我想在这个 block 上做一个覆盖 div。我在 my demo 中这样做了.

如果我将position: fixed设置为overlay，那么相对于wrapping div就不能调整到自己的大小了。如果我设置 position: absolute，叠加层可以适合包装器，但它不能在滚动文本时停留在顶部。

我该如何克服这个问题？不使用 javascript 是否可行？

Answer 1

LIVE DEMO

HTML 中的一些变化:

<div class="pane">
  <div class="pane-content">
     <p>Wet oxidation is a form of hydrothermal...</p>
  </div>
  <div class="pane-overlay">Click to hide overlay</div>
</div>

CSS:

.pane {
    width: 600px;
    height:400px;
    position: relative;
}
.pane-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}
.pane-overlay {
    position: absolute; 
    left:0;
    top:0;
    width: 100%;
    height:100%;
    background: #c2c2c2;
    opacity: 0.6;
}