Как мне наложить прозрачную панель навигации над изображением героя и иметь функциональную кнопку на изображении героя? - PullRequest
Новая
       18

Как мне наложить прозрачную панель навигации над изображением героя и иметь функциональную кнопку на изображении героя?

1 голос
/ 10 июня 2019

Я установил прозрачную навигационную панель поверх изображения героя, однако кнопки на изображении героя не работают.

Навигация имеет z-индекс 1, а изображение, текст и кнопка моего героя - Z-индекс -1.Это делает кнопку неактивной, поскольку она находится позади навигационной панели.

Вещи, которые я пробовал:

-Я пытался дать моей кнопке z-индекс 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>

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Просто установите z-index как 

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

.buttons {
  z-index : 1002;
}

и ваша проблема решится

0 голосов
/ 10 июня 2019

Ваш Z-индекс должен быть больше, чем навигационная панель, перекрывающая кнопку.

...