链接 (<a>) 不适用于绝对位置的图像答案

【问题标题】：link (<a>) doesn't work with images in absolute position链接 (<a>) 不适用于绝对位置的图像
【发布时间】：2015-10-13 14:32:42
【问题描述】：

仅当我从图像中删除“绝对位置”时，第 44 行链接才有效。我尝试了opera、firefox、IE、safary和chrome。

我尝试更改链接的 z-index，但没有任何结果。

您可以通过在此处下载图像和代码来查看此问题： https://www.mediafire.com/folder/kn6wdothgbsms/html_problem

我还直接在此页面上复制/粘贴代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>

<style>

section>img:first-child
{
    position:absolute;
    left:0px; top:0;
}

section>img:nth-child(2)
{
    position:absolute;
    right:0px; top:0;
}

article
{
    padding:50px;
}

a
{
    z-index:10;
}

</style>

</head>

<body>

        <section>

            <img alt="article_end" src="main_top_left.png"/>
            <img alt="article_end" src="main_top_right.png"/>


            <article>
              <a href="www.google.fr">LINK</a> 
            </article>

        </section>   

</body>
</html>

【问题讨论】：

请发布您希望修复的代码以及有效问题。用户不必为了帮助您解决问题而下载内容。
您到底想完成什么？此外，z-index 不适用于没有 css 定位的元素。
绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好和响应更快的选项LearnLayout.com
向我的链接添加位置解决了问题！非常感谢！
感谢 Paulie 提供的链接，我现在会检查它

标签： html css

【解决方案1】：

Z-index 仅适用于已设置position: absolute 或position: relative 的元素；所以为了让你的链接“在”你的图片之上，你应该给它一个位置：相对的。

工作示例：http://www.codeply.com/go/7Gog6kcwiC

另见z-index not working with position absolute

【讨论】：