Fill and overlap

Fill and overlap

Hi,

I have a rectangle and I want it to always fill the screen,no matter how "long" the webpage is and I want that rectangle to be on top of every element on the page.

I want the rectangle to overlap every element on the page,without affecting the functionality of other elements.
I have this code from the swipe example.

Thank you.
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  7.   <title>swipe</title>
  8.   <body>
  9.   <div class="overlay"></div>
  10.   
  11.   <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  12.   <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  13.   <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  14.   <style>
  15.   html, body { padding: 0; margin: 0; }
  16.   html, .ui-mobile, .ui-mobile body {
  17.     height: 105px;
  18.   }
  19.   body{
  20.   position:relative;
  21.   }
  22.   .overlay{
  23.   position: absolute;
  24.   top: 0;
  25.   left: 0;
  26.   width: 100%;
  27.   height: 100%;
  28.   z-index: 10;
  29.   
  30.   }
  31.   .ui-mobile, .ui-mobile .ui-page {
  32.     min-height: 105px;
  33.   }
  34.   #nav {
  35.     font-size: 200%;
  36.     width:17.1875em;
  37.     margin:17px auto 0 auto;
  38.   }
  39.   #nav a {
  40.     color: #777;
  41.     border: 2px solid #777;
  42.     background-color: #ccc;
  43.     padding: 0.2em 0.6em;
  44.     text-decoration: none;
  45.     float: left;
  46.     margin-right: 0.3em;
  47.   }
  48.   #nav a:hover {
  49.     color: #999;
  50.     border-color: #999;
  51.     background: #eee;
  52.   }
  53.   #nav a.selected,
  54.   #nav a.selected:hover {
  55.     color: #0a0;
  56.     border-color: #0a0;
  57.     background: #afa;
  58.   }
  59.   div.box {
  60.     width: 30em;
  61.     height: 40em;
  62.     background-color: #108040;
  63.   }
  64.   div.box.swipe {
  65.     background-color: #7ACEF4;
  66.   }
  67.   </style>
  68. </head>
  69. <body>
  70.  
  71. <h3>Swipe the green rectangle to change its color:</h3>
  72. <div class="box"></div>
  73.  
  74. <script>
  75. $(function(){
  76.  
  77.   $( "div.box" ).on( "swipe", swipeHandler );
  78.  
  79.     function swipeHandler( event ){
  80.     $( event.target ).addClass( "swipe" );
  81.   }
  82. });
  83. </script>
  84.  
  85. </body>
  86. </html>