添加位置相对元素时，位置固定标题位于文本后面答案

【问题标题】：Position Fixed Header goes behind text when Position Relative element is added添加位置相对元素时，位置固定标题位于文本后面
【发布时间】：2013-04-30 06:45:22
【问题描述】：

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

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

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

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

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

我尝试将 z-index 添加到我的标题中（例如 9999），但它不起作用。我不明白为什么添加相对位置会打乱事物的显示顺序。

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

【问题讨论】：

准备好你的小提琴了吗？
一些代码会对我们有所帮助，因为您的问题可能是由周围的标记引起的，或者其他...谢谢！
它已经解决了，不过还是谢谢！下次

标签： html css position z-index

【解决方案1】：

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

【讨论】：

这本身并没有做任何事情，但它带来了伟大的事情，ty
我很难做出自己的回答并接受，所以如果你只是添加 z-index 的东西并使其更清楚你所指的元素;指的是标题，我会接受你的跨度>

【解决方案2】：

正如 Ganesh 所说，添加 position: relative 到标题的父元素是开始的步骤。之后将 z-index 添加到同一个父元素完全解决了这个问题。

【讨论】：

【解决方案3】：

检查父元素上较低的z-index，它似乎覆盖了子元素的z-index。

我过去曾遇到过z-index 下拉菜单和 jquery UI 选项卡的问题。我认为这与stacking effects created us rules like opacity or transition 有关，但对我来说，问题是父元素的z-index 低于子元素。

【讨论】：