title: Position absolute but with fixed scrolling
body: <p>I would like it so the buttons stay on the screen.</p>
  
  <p>Right now i use position absolute, so the buttons are a fixed amount to the left and right of the list. But i also want it so the buttons stay in place while scrolling (like with position: fixed).</p>
  
  <p><a href="http://jsfiddle.net/6vb5u7eg/1/" rel="nofollow">http://jsfiddle.net/6vb5u7eg/1/</a></p>
  
  <p>this is the CSS</p>
  
  <pre><code>#container {
      width: 80%;
      margin: 0 auto;
  }
  .extradiv {
      padding: 0 80px; /* 70px icon width + 10px margin */
      position:relative;
  }
  .navblue {
      position: absolute;
      left:0;
      top:0;
  }
  .navorange {
      position: absolute;
      top:0;
      right:0;
  }
  .navblue ul {
      list-style: none;
      padding-left: 0;
  }
  .navblue a {
      display: block;
      font-family: Pictoss;
      font-size: 20px;
      padding: 2px 20px 38px 20px;
      background:#017da1;
      width: 20px;
      text-decoration: none;
      overflow: hidden;
      text-shadow: 0 -1px 1px black;
      border-radius: 50px;
      color: white;
      height: 20px;
      margin-bottom: 10px;
      border: 5px solid #017da1;
      -webkit-transition: all ease-in-out .3s;
      -webkit-background-clip: padding-box;
  }
  .navorange a {
      display: block;
      font-family: Pictoss;
      font-size: 20px;
      padding: 2px 20px 38px 20px;
      background: #e9500c;
      width: 20px;
      text-decoration: none;
      overflow: hidden;
      text-shadow: 0 -1px 1px black;
      border-radius:50px;
      color: white;
      height: 20px;
      margin-bottom: 10px;
      border: 5px solid #e9500c;
  }
  .navorange ul {
      list-style: none;
      padding-left: 0;
  }
  #biglist {
      height: 500px;
      background-color: #e3e3e3;
      border-radius: 5px;
      color: #000;
      border-color: transparent;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>this is the HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="extradiv"&gt;
          &lt;div class="navblue"&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;a class="button1" href="#1"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a class="button2" href="#2"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a class="button3" href="#3"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="navorange"&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;a class="button4" href="#4"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a class="button5" href="#5"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt; &lt;a class="button6" href="#6"&gt;blabla&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id="biglist"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>