在滚动时覆盖元素上的固定标题

Question

我有一个固定的标题，因此当我滚动时，它会保留在页面顶部，以便访问者可以快速导航或跳过页面的各个部分。

以下是我的问题图片：

问题非常简单 - 我希望我的标题浮动在任何其他对象的顶部而不是被它们隐藏，但我认为没有javascript就没有办法做到这一点。这是我的CSS：

#primary header {
position: fixed;
margin: 0;
padding: 0; 
width: 100%;
height: 50px;
background-color: rgb(49,49,49);
}
nav { /* positions nav menu */
position: fixed; /* keeps the nav bar fixed at top when scrolling */
top: 1.25%;
left: 27%;

}
nav a {
margin: 0 50px;
padding: 10px 20px;
font-size: 20px;
}

无论如何我能做到这一点？我不熟悉Javascript，但是会喜欢一些帮助！

Answer 1

在固定元素上设置css z-index属性。价值越高，前面的大部分都会得到......

喜欢：

#primary header   {
    z-index: 999; /* SET THE NEEDED AMOUNT */
}

Answer 2

z-index属性是定位元素的常见解决方案，但看起来YouTube也提供了解决方案。

  

添加参数以强制YouTube iframe设置较低的z-index。

     

如果您要在YouTube iframe上方显示任何元素，则只需在iFrame网址中添加参数。

     

Ricard Torres' Personal Blog

<iframe width="560" height="315" src="//www.youtube.com/embed/0HxNtWEIKhQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>

JSFiddle似乎没有重现这个问题，但这里也是一个例子：

JSFiddle Example

StackOverflow Duplicate Question

YouTube API Documentation (Preferable Embedding Method)