HTML – 固定导航栏落后于内容

概述我这里有一个固定的导航栏. 问题是当你向下滚动时,如果你将鼠标悬停在一个基本上位于导航栏后面的元素上,它就会变成导航栏的顶部？ 很奇怪？ 有什么建议？ CSS： html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #fff; } 我这里有一个固定的导航栏.

问题是当你向下滚动时,如果你将鼠标悬停在一个基本上位于导航栏后面的元素上,它就会变成导航栏的顶部？

很奇怪？

有什么建议？

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/

解决方法 添加z-index：9;导航

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 >    <div >      <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 >      <a href="#"><h2>Tom Walsh</h2></a>    </div>  </div></nav><div >  <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>

总结

以上是内存溢出为你收集整理的HTML – 固定导航栏落后于内容全部内容，希望文章能够帮你解决HTML – 固定导航栏落后于内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。