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

Posted 2023-02-24

【中文标题】滚动时在元素上覆盖固定标题

【英文标题】：Overlaying a Fixed Header Over Elements When Scrolling

【发布时间】：2014-07-30 02:40:00

【问题描述】：

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

这是我的问题的图片：

问题很简单——我希望我的标题漂浮在任何其他对象的顶部而不是被它们隐藏，但我认为没有 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，但希望得到一些帮助！

【问题讨论】：

看来你只需要使用css z-index property

谢谢！就是这样！

【参考方案1】：

在您的固定元素上设置 css z-index 属性。值越高，越靠前...

喜欢：

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

【讨论】：

太棒了！谢谢你快速的回复！！！我会投票，但我还不能！谢谢！

【参考方案2】：

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

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

如果您想在 YouTube iframe 上方显示任何元素，您只需向 iFrame 网址添加一个参数即可。

Ricard Torres' Personal Blog

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

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

JSFiddle Example

*** Duplicate Question

YouTube API Documentation (Preferable Embedding Method)

【讨论】：

如果我误解了您的问题，我深表歉意。如果您需要控制所有页面元素，那么 LcSalazar 的帖子是最准确的。这是 JSFiddle 示例：jsfiddle.net/uLKhJ