css - 用覆盖 mask div，防止 mask 滚动

Question

我有一个包含可滚动内容的 div。我想为其添加一个覆盖内容的颜色 mask ，但不会随内容滚动。 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>

在我的 fiddle 中，您会看到 mask ，但是当我在我的 div 中向下滚动时，它会滚开。我需要使用固定位置还是绝对位置？谢谢你的建议!

Answer 1

将可滚动区域的内容包装在一个包装器中，并定位它也absolutely。使用 overflow:auto 使包装器可滚动。 fiddle :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;
}