title: Why is the section with position set to fixed moving with the other section?
body: <p>Note: Click full page when testing.</p>
  
  <p>As you can see by the snippet, the section with the class "common" is set to a fixed position, but it seems to be relative to the other section.  How do I fix it so that the common section is fixed relative to the browser?</p>
  
  <p>Jsfiddle:</p>
  
  <p><a href="https://jsfiddle.net/my1c76vb/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=my1c76vb" rel="nofollow">https://jsfiddle.net/my1c76vb/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=my1c76vb</a></p>
  
  <p>Code:</p>
  
  <p>HTML5:</p>
  
  <pre><code>&lt;?php session_start(); ?&gt;
  &lt;!DOCTYPE html&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
      &lt;title&gt;Log in&lt;/title&gt;
    &lt;body&gt;
          &lt;section class="common"&gt;
        &lt;header&gt;
          &lt;img src="resources/header.png" alt="Sqeaking Duck"/&gt;
        &lt;/header&gt;
  
        &lt;aside class="menu"&gt;
          &lt;h3&gt;Guest&lt;/h3&gt;
          &lt;hr&gt;
          &lt;nav&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="home.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="login.php"&gt;Log in&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="register.php"&gt;Register&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/aside&gt;
      &lt;/section&gt;
      &lt;section class="login"&gt;
        &lt;form action="loginManager.php" method="post"&gt;
          &lt;fieldset&gt;
            &lt;legend&gt;Log in&lt;/legend&gt;
            User: &lt;input type="text" name="username" value=""&gt;
            &lt;span class="error"&gt;&lt;?php echo isset($_SESSION['state']) ? $_SESSION['userErr'] : '';?&gt;&lt;/span&gt;&lt;br&gt;
            Password: &lt;input type="password" name="password" value=""&gt;
            &lt;span class="error"&gt;&lt;?php echo isset($_SESSION['state']) ? $_SESSION['passErr'] : '';?&gt;&lt;/span&gt;&lt;br&gt;
            &lt;input type="submit" name="submit" value="Submit"&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
        &lt;p&gt;&lt;span class="error"&gt;&lt;?php echo isset($_SESSION['state']) ? $_SESSION['generalErr'] : '';?&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/section&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*Common pages */
  .common {
    z-index: 1;
    margin-top: 10px;
    position: fixed;
    width: 100%;
  }
  
  header {
    width: 100%;
    text-align: center;
    background-color: CornflowerBlue;
  }
  
  .menu {
    margin-top: 25px;
    width: 80px;
    background-color: black;
    text-align: center;
  }
  
  .menu h3 {
    color: white;
    display: inline-block;
    margin: 0;
    padding-top: 5px;
  }
  
  .menu hr {border-color: white;}
  
  .menu nav {
    display: inline-block;
    text-align: left;
    width: 100%
  }
  
  .menu ul {
    list-style: none;
    padding: 0px 0px 0px 10px;
    margin: 0;
  }
  
  .menu li {
    padding-bottom: 10px;
  }
  
  .menu a {
    text-decoration: none;
    color: white;
  }
  
  /*Log in page*/
  .login {
    text-align: center;
    z-index: 0;
    margin-top: 300px;
  }
  
  /*General*/
  body {
    background-color: grey;
  }
  </code></pre>