маска 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. 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; 
}