html - 滚动文章后，导航栏变得不需要透明

Question

我将我的问题缩小到 CSS 行 position:relative; 如果我删除它，它会起作用，但是类别 cat-work(蓝色标签)会显示在左上角。老实说，我不知道如何修复它。这里是 Codepen 上的代码；

http://codepen.io/Allkind/pen/YXEjXX

    article{
    width:auto;
    min-height:10em;
    box-shadow: 0 0 4px rgba(0,0,0,.7);
    margin: 1em;
    font-family: 'Quicksand';
    float: left;
    position:relative;
    }

注意:是的，图片太大了，但我用其他人试过 - 结果相同。所以有人可能有更好的解决方案然后删除标签？^^

Answer 1

它不是透明的，你的导航栏被 article 标签覆盖了。修复导航栏中的 z-index 集。

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);
  z-index: 2; /* the z-index */
}

Working Code