Следующий раздел перекрывает первый раздел даже с использованием z-index - PullRequest
Новая
       32

Следующий раздел перекрывает первый раздел даже с использованием z-index

0 голосов
/ 16 июня 2020

Я пытаюсь сделать так, чтобы навигационное меню перекрывало каждый раздел. Но я пытаюсь использовать z-index, но, похоже, в этой ситуации он не работает.

Я пробую много решений, например, добавить позицию для всех элементов, но все еще не работает. Вот мой HTML код 

<div class="wrap-content">
  <header class="header">
    <div class="header__center">
      <nav class="header__center--nav">
        <ul>
          <li class="main-menu"><a class="main-menu__a" href=""><span class="flaticon-right-arrow main-menu__a"></span>
                Elements</a>
            <div class="wrapper-menu">
              <div class="row">
                <div class="col-xl-3 col-lg-3">
                  <h3>Classic</h3>
                  <div class="menu-1">
                    <ul>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
                    </ul>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3">
                  <h3>Pretentation</h3>
                  <div class="menu-1">
                    <ul>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>Contact</a></li>
                    </ul>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3">
                  <h3>Infographic</h3>
                  <div class="menu-1">
                    <ul>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>

                    </ul>
                  </div>
                </div>
                <div class="col-xl-3 col-lg-3">
                  <h3>Typography</h3>
                  <div class="menu-1">
                    <ul>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About us</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>About me</a></li>
                      <li> <a href="#"><span class="flaticon-right-arrow"></span>Contact us</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

          </li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="section-1">

    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="col-6__inner">
            <h1>Incredible app
              <span class="col__inner--trade">features</span></h1>
            <span></span>
          </div>

          <div class="col-6__title">
            <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo sdam dolorem debitis quod.</h3>
          </div>

        </div>
        <div class="col-6">
          <div class="col-6__phone">
            <div class="img-phone-1">
              <img src="./img/phone-img/phone-2.png" alt="">
            </div>

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

Вот результат после того, как я установил z-index навигационного меню равным 9999. введите здесь описание изображения

1 Ответ

0 голосов
/ 16 июня 2020

Z-index работает только с позиционированными элементами -

  • позиция: абсолютная
  • позиция: относительная
  • позиция: фиксированная
  • позиция: липкий

поэтому в зависимости от того, чего вы пытаетесь достичь, возможно, вам нужно закрепить Nav вверху ??

что-то вроде этого, например: 

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
...