title: Fixed navbar falls behind content
body: <p>I have a fixed navbar here.</p>
  
  <p>The problem is that when you scroll down, if you then hover over an element that is essentially behind the navbar, it becomes ontop of the nav bar?</p>
  
  <p>Very strange?</p>
  
  <p>Any advice?</p>
  
  <p>CSS:</p>
  
  <pre><code>    html, body {
      margin: 0;
      padding: 0;
      font-family: 'Open Sans', sans-serif;
      background-color: #fff; }
  
      .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px; }
  
      nav {
      background-color: #fff;
      height: 40px;
      position: fixed;
      top: 0;
      width: 100%;
      float: left; }
      nav .links {
      float: left;
      font-size: 13px;
      font-weight: 600;
      margin-top: 10px; }
      nav .links a {
      color: #000;
      text-decoration: none;
      margin-right: 10px;
      transition: .15s; }
      nav .links a:hover {
      opacity: 0.6;
      transition: .15s; }
      nav .name {
      float: right;
      margin-top: 10px; }
      nav .name a {
      color: #000;
      text-decoration: none; }
      nav .name a h2 {
      font-size: 14px;
      margin: 0; }
  
      .work {
      font-size: 0;
      padding-top: 40px;
      overflow: hidden; }
      .work img {
      max-width: 20%;
      transition: .15s; }
      .work img:hover {
      opacity: .8;
      transition: .15s; }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/2c53e1eg/" rel="noreferrer">http://jsfiddle.net/2c53e1eg/</a></p>