Question

I have a little piece code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Asia Maldivas</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <a href="#">TEST OUTER RELATIVE</a>
        <div class="bg">
           <a href="#">TEST</a>
        </div>
    </body>
</html>

The CSS:

.bg {
    position: relative;
    background: linear-gradient(to bottom, rgba(18,138,167,0.95) 30px,rgba(62,195,209,0.95) 7%,rgba(12,115,160,1) 100%);
    z-index: -1;
}

a {
    text-decoration: underline;
    z-index: 99;
}

Now I have a link which is not clickable and I don't understand why.

Answer 1

它是由z-index引起的：-1;如果删除它，它将是可点击的。

Answer 2

正如Dan所说，您需要从z-index: -1中移除.bg。这是现场的例子：

https://jsfiddle.net/smmmrw7g/

似乎z-index之间有一些继承。

标记<a> not clickable on relatively positioned block

2 个答案: