Question

我不明白为什么我能够通过这样的导航栏看到。我甚至可以通过它突出显示文本。有帮助吗？

这是HTML和CSS，当我在在线编辑器上测试它时，它可以正常工作。但是在我的本地代码上，它没有。

    nav{
    position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
      border: 1px solid rgba(0,0,0,.1);
    }
      nav ul{
        list-style: none;
        position: relative;
        float: right;
        margin-right: 100px;
        display: inline-table;
      }
        nav ul li{
          float: left;
          -webkit-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
        }

    nav ul li:hover{background: rgba(0,0,0,.15);}
    nav ul li:hover > ul{display: block;}
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
      nav ul li a{
        display: block; 
        padding: 30px 20px;
        color: #222; 
        font-size: .9em;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;
}

<nav role="navigation"> 

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

</nav>

Answer 1

我无法评论，所以这似乎是一个答案，但它更像是一个建议，因为我无法看到你的所有代码（比如Lorem Ipsum来自哪里？）

您已将导航设置为位置：已修复，这会将自身从DOM的结构中移除。我没有看到那里的z-index属性，所以可能会解决这个问题。如果将z-index设置为大于0的任何值，则文本将隐藏在导航后面。

nav {
  position:fixed;
  z-index: 1;
...
}

要确保文本位于导航下方，您可能需要在body标签上设置margin-top，等同于导航栏的高度。

导航栏 - 透明问题

1 个答案: