用覆盖蒙版div，防止蒙版滚动

Question

我有一个可滚动内容的div。我想给它添加一个覆盖内容的颜色蒙版，但不会随着内容滚动。http://jsfiddle.net/6e9t1wt3/1/

  *{box-sizing:border-box;}
  #main{position:relative; border: 1px solid blue; height: 400px; overflow: auto;}
  #main:before {
      content:'';
      width:100%;
      height:100%;background:red;position:fixed;
  }
<div id="stuff">

  <div id="main">
      <div class="loading-mask">Loading...</div>
      <table class="data">
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr>
          <tr><td>stuff</td></tr> 
      </table>
  </div>

在我的小提琴中，你会看到遮罩，但当我在div中向下滚动时，它会滚动。我需要使用固定位置还是绝对位置?谢谢你的建议!

Answer 1

将该可滚动区域的内容包裹在包装器中，position和absolutely也是如此。使用overflow:auto使包装器可滚动。小提琴:http://jsfiddle.net/ilpo/6e9t1wt3/2/

HTML:

<div id="main">
    <div class="loading-mask">Loading...</div>
    <div class="content">
        <!-- content here -->
    </div>
</div>

CSS:

#main {
    position:relative;
    border: 1px solid blue;
    height: 400px;
    overflow: hidden;
}
.loading-mask {
    padding: 10px;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background: rgba(3, 3, 3, 0.8);
    width:100%;
}
.content {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:auto;
}