固定块内滚动div

Question

我有一个带文本的块，当文本足够大时滚动。我想在这个块上做一个叠加div。我是在my demo中完成的。

如果我将position: fixed设置为叠加，则无法将其调整为相对于包装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;
}

Answer 2

您可以直接使用父级div的背景颜色和不透明度。

并使用backgroun: rgba()格式设置bg颜色和不透明度，这样只允许不透明度为bg颜色而不是文本

.pane {
    width: 600px;
    height:400px;
    overflow: auto;
    position: relative;
    background: rgba(194, 194, 194, 0.6);
}

<强> DEMO

Answer 3

将窗格内的所有内容包装在div中，以便此内部div获取内容的高度。

<div class="pane">
  <div class="inner">
    <div class="overlay"></div>
    content
  </div>
</div>

demo