html - 添加 Position Relative 元素时，Position Fixed Header 位于文本后面

Question

所以我知道有很多关于与 z-index 相关的固定/相对/绝对位置的问题，但我仍然无法使用这些解决我的问题。

基本上我有一个固定的 header 。它工作得很好，向下滚动页面时一切都在它后面。

我最近想添加指向 div id 的链接，但为了说明标题，我不得不添加以下代码，其中 link 是父元素，然后 linkTo 是具有我们实际的 ID 的类链接到。此功能完全有效，提供正确的偏移量，使标题位于我们想要的 div 之上。

.link {position: relative;}
.linkTo {position: absolute; top: -80px;}

问题在于，出于某种原因，现在我的 div 位于页面上所有内容的后面。我仍然可以看到它，但文字和图像在前面。

我已经尝试将 z-index 添加到我的 header (例如 9999)，但它不起作用。我不明白为什么添加相对位置会弄乱事物的显示顺序。

我想提供一个示例，但我的代码相当大。如果这还不够，我稍后可以尝试制作一个 jfiddle。

Answer 1

添加position:relative； z-index:9999 到父元素，它将使该元素保持在菜单内。