Исправлена ​​ошибка, связанная с навигацией.

Question

У меня есть фиксированный навигатор здесь.

Проблема заключается в том, что при прокрутке вниз, если вы затем наводите над элементом, который по существу находится за навигационной панелью, он становится ontop навигационной панели?

Очень странно?

Любые советы?

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

Добавить z-index: 9;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>

Answer 2

Добавить этот стиль

.links{z-index:1}