如何在主图像上覆盖透明导航栏并在主图像上有一个功能按钮？答案

【问题标题】：How do I overlay a transparent navbar over a hero image and have a functioning button on the hero image?如何在主图像上覆盖透明导航栏并在主图像上有一个功能按钮？
【发布时间】：2019-10-24 13:18:39
【问题描述】：

我已将我的导航栏设置为在我的主图上透明，但是我的主图上的按钮不起作用。

导航栏的 z-index 为 1，我的主图、文本和按钮的 z-index 为 -1。这使得按钮无法点击，因为它被设置在导航栏后面。

我尝试过的事情：

-我尝试将我的按钮的 z-index 设为 1，但它不起作用

-我尝试将我的按钮包装在一个 div 类中并将其 z-index 设置为 1，但它不起作用

-如果我反转导航栏和英雄图像的 z-index，按钮可以工作，但是，导航栏设置在图像后面并且看不到。

如何让导航栏位于主图上方并让我的按钮可点击？

.top-nav{
    font-size: 20px;
    margin-top:0em;
    margin-bottom:0em;
    font-weight:600;
    padding: 0px 32px;
    color: white !important;    
    background: transparent;
}

 
.navbar-overlay {
    position:relative;
    margin-bottom: -104px;  
    z-index: 1;  
}

.first-section-hero {    
    position: relative;
    min-height: auto;
    height:900px;
    margin-top: 0em;
    padding-bottom: 10em; 
    background-image:url("{% static 'img/yellow_swoosh.svg' %}");  
     background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
    z-index: -1;
}

<section class="top-nav ">
    <div class= navbar-overlay >
        <nav class="navbar navbar-expand-lg navbar-dark ">
            <a class="navbar-brand"  href="{{ home_url }}">Name</a>
                <div class="collapse  navbar-collapse " id="navbarText">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item  ">
                        <a class="nav-link" href="/articles">Resources</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">About </a>
                    </li> 
                </ul>
            </div>     
        </nav>
    </div>
</section>

<section class="first-section-hero" > 
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-xs-12 ">
                <h1>TITLE</h1>
                <a href="#" class="btn btn-default btn-xl">FIND OUT MORE</a>
            </div>
        </div>
    </div>
</section>

【问题讨论】：

改用正 z-indexes
导航栏高度是多少？导航如何与英雄按钮重叠？您能否添加一些成像器参考，也许是整个部分代码？
我添加了更多代码 :)
我看到一堆亲戚positions 没有absolute。使英雄图像的父级图像relative。将导航放在同一个相对父级中的英雄图像之后。将相对父级的所有子级设为position:absolute; top:0; left:0;。如果分层正确，您甚至不必使用 z-index，使用此技术。

标签： html css navbar overlay z-index

【解决方案1】：

您的 Z-index 应该大于与按钮重叠的导航栏。

【讨论】：

如果我将第一部分英雄的 z-index 设置为 2，并且导航栏设置为 1，则英雄图像会越过导航栏，因此我看不到导航栏。然后，英雄图像上的按钮就可以工作了。
如果您将代码 sn-p 准确地更新为系统上的内容，将会很有帮助。给定的代码 sn -p 不是很有用。或者显示您想要实现的图形布局。

【解决方案2】：

只需像这样设置 z-index

.image {
  z-index : 1000;
}
.navbar {
  z-index : 1001;
}

.buttons {
  z-index : 1002;
}

你的问题会解决的

【讨论】：