如何将链接定位在另一个具有位置的 div 上：absolute答案

【问题标题】：How to position a link over another div that has position:absolute如何将链接定位在另一个具有位置的 div 上：absolute
【发布时间】：2015-10-27 18:05:10
【问题描述】：

我有以下 HTML 和 CSS，其中 #header id 的位置必须强制设置为 absolute：

<div class="main">
    <a href="www.website.com">
    <div id="header" class="other">
</div>


#header{
    padding-left: 250px; 
    position:absolute;
}

这段代码在链接标签上设置了header div，它变得（链接）无法选择。

我的问题是我必须对 .main > a 应用什么 CSS 才能使其不低于 header div？

我尝试了以下方法，但它不起作用，因此欢迎任何其他想法：

.main > a {
    z-index:99999;  
}

【问题讨论】：

尝试将position:relative 添加到.main > a..即，您的新CSS 将类似于.main > a { z-index:99999; position:relative; }
这么简单...谢谢队友！
哦，太好了...如果真的对您有帮助，您能否将我的回答标记为已接受..
是的，我会的，它可以让我在 10 分钟内完成。同时，您知道为什么这仅适用于 Mozilla，但在 IE 10 中，a 标签仍然不可用？
Thankyou..请查看答案here 以了解 IE 中的错误。

标签： html css position css-position absolute

【解决方案1】：

z-index 仅适用于定位元素

z-index 如果没有为元素指定定位，则不会应用。所以，我建议你稍微改变你的 CSS，如下所示。

也就是说，.main > a 的新 CSS 会是这样的

.main > a {
    position:relative;
    z-index:99999;  
}

更新

z-index 不适用于静态定位的元素。请参阅答案here

【讨论】：

position: static; 呢？它将使元素具有指定的位置，但 z-index 将不适用。

【解决方案2】：

如果您不将position 设置为relative、absolute 或fixed，z-index 属性将不起作用。

.main > a {
    position: relative;
    z-index:99999;  
}

【讨论】：