Question

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

导航栏的z索引为1，我的英雄图像，文本和按钮的z索引为-1。这将使按钮不可单击，因为它被设置在导航栏的后面。

我尝试过的事情：

-我尝试将按钮的z-index设置为1，但无效

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

-如果我反转导航栏和英雄图像的z索引，则按钮起作用，但是导航栏设置在图像后面，无法看到。

如何在导航栏上放置英雄图像并单击我的按钮？

.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>

Answer 1

您的Z索引应大于与按钮重叠的导航栏。

Answer 2

只需像

那样设置z-index

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

.buttons {
  z-index : 1002;
}

您的问题将会解决

如何在英雄图像上覆盖透明的导航栏，并在英雄图像上具有可正常使用的按钮？

2 个答案: