Question

我这里有一个固定的导航栏。

问题在于，当您向下滚动时，如果您将鼠标悬停在基本上位于导航栏后面的元素上，它会变为导航栏的顶部？

很奇怪？

有什么建议吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

添加此款式

.links{z-index:1}

固定导航栏落后于内容

2 个答案: