固定块内滚动div答案

【问题标题】：Fixed block inside scrolling div固定块内滚动div
【发布时间】：2013-12-30 19:15:02
【问题描述】：

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

如果我将position: fixed 设置为覆盖，则无法将其调整为相对于包装 div 自身的大小。如果我设置position: absolute，则覆盖层可以放入包装器中，但在滚动文本时它不能停留在顶部。

我该如何克服这个问题？不使用javascript可以吗？

【问题讨论】：

为什么要使用覆盖 div？
我想禁用内容，只有在点击叠加层后才能启用它

标签： css scroll css-position

【解决方案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;
}

【讨论】：

这对我没有帮助，因为文本块可能有任何大小，演示中的值仅用于示例
@БорисСердюк EDITED 这应该可以。看看吧。
也许没有额外的 .pane-content 是不行的。 @RokoCBuljan，谢谢你的好例子

【解决方案2】：

您可以直接将背景颜色和不透明度用于父 div。

并使用backgroun: rgba() 格式设置背景颜色和不透明度，这允许不透明度仅用于背景颜色而不是文本

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

DEMO

【讨论】：

【解决方案3】：

将窗格内的所有内容包装在一个 div 中，以便这个内部 div 获得内容的高度。

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

demo

【讨论】：

可能不得不这样做，如果没有办法如何在 div 内创建纯滚动固定块