Z-Index 阻止点击导航栏 Link

Question

元素的 z-index 或定位是否会阻止用户点击导航栏 link？

在我的站点 http://www.tsawebmaster1.hhstsa.com/live-tour/live-tour.html 上，由于某种原因我无法单击导航栏中的任何 link。这是 z-index 或定位的原因吗？我该如何缓解这个问题以及一般用户如何避免这个问题？

Answer 1

导航栏的 Z-index 值应高于页面其余部分。

Answer 2

您的问题与 z-index 无关。别管那个了。您的问题是滥用 <header> 元素。建议您在 HTML5 文档中使用一个 <header>，尽管您仍然可以使用多个。但在你的情况下，你有你的 header 样式，它适用于导航和介绍。

将介绍替换为 div 而不是 header，如下所示：

<div class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 style="font-family: Montserrat,Helvetica,Arial,sans-serif;" class="brand-heading">Harriton TSA</h1>
                    <p class="intro-text" style="text-align:center;visibility:visible;">Take a virtual tour of our TSA Chapter and STEM program</p>
                    <a href="#" class="btn btn-circle page-scroll" style="text-decoration:none;"><div id="scroll" style="font-size:22px;text-align:center;">Scroll</div><i class="fa fa-angle-double-down animated"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

瞧！您恢复了导航功能

Z-Index 阻止点击导航栏 Link

Z-Index Preventing Clicking on Navbar Link

html

css

jquery

z-index

css-position