title: Position Fixed doesn't work in Chrome
body: <p>I'm creating these overlay previous and next arrows, like the ones on this website - <a href="http://www.usatoday.com" rel="nofollow">http://www.usatoday.com</a></p>
  
  <p>And the problem I'm getting is in Chrome, the arrows won't stay fixed, when I scroll down the page the arrows go up with the page and you can't see them anymore. The weird thing is that in Firefox they work and stay at top: 45% position: fixed all the time like they should. 
  Here is a screenshot on how it works in ff: <a href="https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG" rel="nofollow">https://www.dropbox.com/s/2vsrv874c3urlqs/firefox.PNG</a></p>
  
  <p>and here is chrome: <a href="https://www.dropbox.com/s/zgr2zhkcnohykgj/chrome.PNG" rel="nofollow">https://www.dropbox.com/s/zgr2zhkcnohykgj/chrome.PNG</a></p>
  
  <p>The html for the arrows:</p>
  
  <pre><code> &lt;div class="overlay-arrows"&gt;
          &lt;div class="front-arrow-wrapper"&gt;
              &lt;a href="#" rel="prev" class="prev-link"&gt;
                  &lt;div class="prev-icon"&gt;
                  &lt;/div&gt;
                  &lt;div class="prev-overlay"&gt;
                      &lt;span class="categ-next"&gt;Category for prev&lt;/span&gt;
                      &lt;p&gt;Title of the post for prev&lt;/p&gt;
                  &lt;/div&gt;          
              &lt;/a&gt;
              &lt;a href="#" rel="next" class="next-link" &gt;
                  &lt;div class="next-icon"&gt;
                  &lt;/div&gt;
                  &lt;div class="next-overlay"&gt;
                      &lt;span class="categ-next"&gt;Category for next&lt;/span&gt;
                      &lt;p&gt;Title of the post for next&lt;/p&gt;
                  &lt;/div&gt;              
              &lt;/a&gt;
          &lt;/div&gt; &lt;!--end .front-arrow-wrapper --&gt;
      &lt;/div&gt; &lt;!--end overlay-arrows --&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>.overlay-arrows{
      position: fixed;
      top: 45%;
      left: 0;
      width: 100%;
      z-index: 9999;
      overflow: visible;
  }
  .front-arrow-wrapper{
  width: 1104px;
  position: relative;
  margin: 0 auto;
  }
  .prev-link{
  left: 0;
  float: left;
  text-decoration: none;
  }
  .next-link{
  right: 0;
  float: right;
  text-decoration: none;
  }   
  .prev-icon{
    background: url(../img/prev.png) 100% 0 no-repeat;
    height: 77px;
    width: 45px;
  float: left;
  }
  .next-icon{
    background: url(../img/next.png) 100% 0 no-repeat;
    height: 77px;
  float: right;
    width: 45px;
  }
  .next-overlay, .prev-overlay{
  opacity: 0;
  filter: alpha(opacity=0);
  width: 250px;
  width: 250px;
  height: 77px;
  color: #F16C14;
  background: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  }   
  .next-link:hover&gt;.next-icon{
  -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    background: url(../img/next-hover.png) 100% 0 no-repeat;
  }
  .next-link:hover&gt;.next-overlay{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    opacity: 10;
    filter: alpha(opacity=100);
  }
  </code></pre>