Fixed navbar falls behind content

Question

I have a fixed navbar here.

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?

Very strange?

Any advice?

CSS:

    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; }

JSFiddle: http://jsfiddle.net/2c53e1eg/

Answer 1

Add z-index: 9; to nav

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;
  z-index: 9;
}
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;
}

<nav>

  <div class="container">

    <div class="links">

      <a href="#">WORK</a>
      <a href="#">ABOUT</a>
      <a href="#">DRIBBBLE</a>
      <a href="#">BEHANCE</a>
      <a href="#">BLOG</a>
      <a href="#">CONTACT</a>

    </div>

    <div class="name">

      <a href="#"><h2>Tom Walsh</h2></a>

    </div>

  </div>

</nav>

<div class="work">

  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>
  <a href="#">
    <img src="http://placehold.it/500x500">
  </a>

</div>