title: How to fix the mask on the device screen
body: <p>Now. There are two buttons. If I click one button, the <code>#mask</code> will show.</p>
  
  <p>My target is to show this web on the mobile phone.
  To tell you the truth, I need to tap one Image which inside in the mobile view,  then the Image will change its size and show at the above of the mobile view.(above means set => index: 99999); </p>
  
  <p>This is my code.</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;textFixCover&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&gt;
      &lt;link href="css/mui.min.css" rel="stylesheet" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;    
      &lt;script src="fonts/iconfont.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          html {
              background-color: #fff;
              height: 2000px;
              position: relative;
          }                   
          #mask {
              position: fix;
              top: 20px;
              left: 0;
              right: 0;       
              height: 600px;  
              display: none;
              background-color: greenyellow;
              z-index: 99999; 
          }           
          #mask .mui-slider {
              position: absolute;
              top: 20px;
              bottom: 0;
              left: 0;
              right: 0;
              height: 400px;
          }           
          #bottom-btn {
              margin-top: 1400px;
              height: 100px;
              width: 100%;
              background-color: #4CD964;          
          }           
          #top-btn {
              margin-top: 400px;
              height: 100px;
              width: 100%;
              background-color: #FF5053;
          }           
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;      
       &lt;section id="top-btn"&gt;&lt;/section&gt;        
       &lt;select id="mask"&gt; &lt;/select&gt;       
       &lt;section id="bottom-btn"&gt;&lt;/section&gt;         
       &lt;script type="text/javascript"&gt;
          $('#top-btn').click(function(){
              $('#mask').css('display','block');              
              setTimeout(function(){
              $('#mask').css('display','none');                
              },3000);
          });         
          $('#bottom-btn').click(function(){
              $('#mask').css('display','block');
                  setTimeout(function(){
                  $('#mask').css('display','none');
              },3000);
          });
       &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Now I face a problem. If I click the <code>bottom-btn</code>, how to set the mask on the current screen. Set it position on the top of the device window. In other words, I mean to fix the mask on the device screen, ignore the web view scroll. </p>
  
  <p>My aim is when I click the <code>bottom btn</code>, I will see the mask on the device screen.
  I don't need to scroll the web view.</p>
  
  <p>I debug the code on the chrome console to simulate mobile devices </p>
  
  <p>This is the perfect result. 
  <a href="https://i.stack.imgur.com/B3MAn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B3MAn.png" alt="enter image description here"></a></p>