title: Items on my webpage keep shifting when I resize the windows
body: <p>The elements in my Html document keep shifting when I resize my browser.It shifts when I resize it and when I drag the window across to an external display. I want the elements to stay where they are when I resize the window, any help would be greatly appreciated.</p>
  
  <p>Here's the HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Udarit.com/home&lt;/title&gt;
    &lt;link href= "MissionImpossible2.css"
        rel="stylesheet"
        type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="away"&gt; 
      &lt;button id="fix"&gt;LOGIN&lt;/button&gt;
    &lt;/div&gt;  
    &lt;div id="break"&gt;
    &lt;div id="lose"&gt;
    &lt;form class= you&gt;
      &lt;input id= nuke
             type="search"
             class="searchterm"
             placeholder="search"&gt;
     &lt;button id="mama"&gt;
     &lt;img id= "reap"
          class="search-icon"
          src="1499177797_Search.svg"&gt;
     &lt;/button&gt;
   &lt;/form&gt;   
   &lt;/div&gt;
   &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>*{margin:0; padding:0;box-sizing:border-box;}
   #nuke {width:500px;
    height: 50px;
  position: relative;
  top:50%;
  left:30%;
  border-style:outset;
  border-color:gainsboro;
  border-radius: 5px;
  background-color:ghostwhite;
  }
  #reap{position: relative;
              height:30px;
              border-radius: 10px;
  border-style: none;
              }
  
  #mama{position: relative;
  height: 47px; 
  width:40px;
  top:10px;
    left: 19.5em;
    border-style: none;
  background-color: rgba(0,0,0,0.1);
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;}
  
  #hey{width: 180px;
   position: relative;
  right:480px;
  top:5px;}
  
  #break{position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color:aqua;
  background: rgba(51,51,51,0.7);
  background-image:url("");
  }
  
  #lose{position: relative;
  top:50%;}
  
  #away{border-style:hidden;
    height:80px;
   background-color: aqua;
   background-color:rgba(0,0,0,0.1);
    z-index: 1;}
  
  #fix{width:100px;
  height: 40px;
  position: relative;
  left:900px;
  top:20px;
  color:white;
  background-color:blue;
  z-index:10;
  border-style:none;
  border-radius:10px;
  font-family:monospace; 
   }
  </code></pre>
  
  <p>Please explain why this is happening and how to prevent it, for future purposes.</p>