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/

Rickard

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>

Draftsman

@TomWalsh Most welcome, As you are new here, Please take a short look at meta.stackexchange.com/questions/5234/… :) – Draftsman

Answer 2

Add this style

.links{z-index:1}

Nikolaos

Good approach, but It will be great if we set it to nav. Maybe he add some other elements with position: relative; and problem will remain same :) – Draftsman