title: Navigation Bar with position set to absolute still moving while scrolling?
body: <p>I'm trying to make a navigation bar not move when scrolling and stay at the top of the page. </p>
  
  <p>I've done this before using position absolute. But for some reason it's not working with this new page I'm setting up. Any ideas on what's going on?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --background: white;
    --box-light: #F8F8F8;
    --box-medium: #DDD;
    --box-dark: #AAA;
    --primary: firebrick;
    --secondary: cornflowerblue;
    --nav-background: #222;
  }
  
  
  /* ---------- HTML and Body ---------- */
  
  html {
    width: 100%;
    font-family: Verdana;
    background-image: url("paper.jpg");
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .main {
    width: 60%;
    margin: auto;
    padding: 16px;
    background-color: var(--background);
    border: 2px solid var(--box-medium);
  }
  
  
  /* ---------- Navigation Bar ---------- */
  
  .navigation {
    list-style-type: none;
    padding: 8px;
    background-color: var(--nav-background);
    border-bottom: 4px solid var(--secondary);
    width: 100%;
    position: absolute !important;
    left: 0;
  }
  
  .navigation h2 {
    border-bottom: none;
    color: var(--primary);
    font-weight: bold;
    margin: 8px;
    padding: 0;
  }
  
  .navigation ul {
    padding: 0;
  }
  
  .navigation ul li {
    display: inline;
    padding: 8px;
  }
  
  .navigation ul li a {
    color: var(--box-medium);
  }
  
  .navigation ul li a:hover {
    color: var(--secondary);
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-------- Navigation Bar ----------&gt;
  &lt;div class="navigation"&gt;
    &lt;h2&gt;Everend Wiki&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Characters&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Species&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Locations&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Objects&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Events&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  &lt;!---------- Body/Main ----------&gt;
  &lt;div class="main"&gt;
    &lt;h1&gt;Page Title&lt;/h1&gt;
    &lt;h2&gt;Section Header&lt;/h2&gt;
    &lt;h3&gt;Subsection Header&lt;/h3&gt;
    &lt;p&gt;
      Paragraph text.
    &lt;/p&gt;
    &lt;div&gt;
      &lt;ol class="contents"&gt;
        &lt;h4&gt;Contents&lt;/h4&gt;
        &lt;li&gt;List item&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/p&gt;
    &lt;div&gt;
      &lt;blockquote&gt;
        &lt;p&gt;"Quote block."&lt;/p&gt;-Source&lt;/blockquote&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you copy and test this yourself, I recommend adding a bunch of random text in the <p> within the body so you have enough content to actually scroll. Once doing this, you'll notice that the navigation bar moves up and down but it's still on top of the body.</p>