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

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)