Question

我知道z-index在不同的位置上存在问题，在此代码段中，我需要它们协同工作，以便我可以在此网站http://www.ericryananderson.com/上复制导航问题在于，当激活覆盖层时，按钮需要进行z索引操作，位置粘滞不喜欢并且不允许其导致覆盖层无法关闭。粘性位置在导航栏上。有解决方法吗？

var bars = document.querySelector('.bars')
var overlay = document.querySelector('.overlay')

var isMenuOpened = false;

bars.addEventListener('click', function() {
  if (isMenuOpened === false) {
    bars.classList.remove('fa-bars');
    bars.classList.add('fa-times');
    overlay.style.display = 'block'
    isMenuOpened = true;

    bars.style.position  = 'fixed'
    bars.style.top = '40px';
    bars.style.right = '60px';


  }else{
    bars.classList.remove('fa-times');
    bars.classList.add('fa-bars');
    overlay.style.display = 'none'

    bars.style.position  = 'static'
    isMenuOpened = false;



  }


})

body{
  height: 3000px;
}
.video{
  width: 100%;
  height: 700px;
  background: red;
}
nav{
  display: flex;
  /* position: sticky; */
  top: 0px;
  justify-content: space-between;
  padding: 50px;
  background: green;
  height: 10px;
}

i{
  font-size: 30px;
  z-index: 10;

}
.overlay{
  position: fixed;
  top:0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  </head>
  <body>
    <div class="video">

    </div>
    <div class="navigation">

      <nav>
        <h4>koreys site</h4>
        <i class="fas fa-bars bars"></i>

      </nav>
    </div>

    <div class="overlay">

    </div>
<script type="text/javascript" src="./main.js"></script>
  </body>
</html>

Z指数和位置粘性悖论

0 个答案: