css - 导航栏-透明问题

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 来自哪里？)

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

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

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