Html link 不可点击

Question

我有一个page with quire simple layout。页面末尾是带有 link 的页脚。问题是 link 不可点击。我尝试为页脚元素设置 z-index: 1000000 但没有成功。不明白是什么问题。有人可以告诉我该代码有什么问题吗？

这是html代码

<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="xxxxxx.css">
</head>
<body>

<div id="wrapper">
    <div class="container-fluid">
        <div class="row">
            <div id="main" class="translateInit translate-2 col-12"> 

            @yield('content')

            </div>
        </div>
    </div>

    <div id="footerPusher"></div>
</div>    

<div id="footer">
    <strong>Created & designed by <a href="https://tatrytec.eu/blog">Tatrytec.eu</a> 2020</strong> &nbsp;&nbsp
</div>

</body>
</html>

scss 看起来像

#wrapper {
    min-height: 100%;
    /* makes footer visible cause 100% push it outside of window */
    margin-bottom: -5em;
}

#main {
    padding-bottom: 10em;
}

Answer 1

检查提供的link后，有一个padding-bottom: 10em;到#maindiv。您需要将其删除，并且

给margin-top: 10em; #footer div.

这将解决问题。

目前 #main div 位于页脚顶部，这就是它不可点击的原因。

Answer 2

要应用 z-index，您需要先定位元素，因此它不是静态的。例如：

#footer {
    position: relative;
    text-align: center;
    z-index: 1;
}

我已经检查过 z-index: 1 足以使 link 可点击。 ;)

Html link 不可点击

Html link is not clickable

html

css

z-index

hyperlink