移動端：css3的animation執(zhí)行時影響fixed定位到它上層的元素

問題描述：

用bootstrap練習(xí)響應(yīng)式開發(fā)網(wǎng)頁的過程中，想對一個擁有背景圖的元素做一個遮罩顯示的動畫，發(fā)現(xiàn)在做動畫的過程中會對用position:fixed;定位到它上面的元素產(chǎn)生影響。
發(fā)現(xiàn)在做動畫的過程中，本來應(yīng)該層級在下面的元素跑到fixed定位元素的層級上面了。花了數(shù)小時經(jīng)過多方面查找原因，仍然沒有找到問題所在。希望大家不吝賜教，先謝謝大家啦。

問題狀況圖：

圖片說明：
圖中右上角的按鈕就是使用position:fixed的元素，它的下面是一個需要動畫的div，div的透明度動畫也會對該按鈕產(chǎn)生影響。

代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <title>blog</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="icon" href="./statics/icon/favicon.ico"> -->
  <link rel="stylesheet" >
  <style>
    body {
      width: 100vw;
      overflow: hidden;
    }

    .container-fluid {
      margin: 0;
      padding: 0;
    }

    .cover-img {
      width: 100%;
      height: 50vh;
      background-attachment: fixed;
      background-color: red;
      /* background-image: url('./statics/images/cover.jpg'); */
      background-repeat: no-repeat;
      -webkit-background-size: 100vw 50vh;
      background-size: 100vw 50vh;
      animation: mask_zoom 1.2s ease-in;
    }

    @keyframes mask_zoom {
      0% {
        opacity: 0;
        -webkit-mask-size: 30%
      }
      40% {
        opacity: .6;
        -webkit-mask-size: 60%
      }
      to {
        opacity: 1;
        -webkit-mask-size: 100%
      }
    }

    @media screen and (max-width: 576px) {
      .navbar {
        position: fixed;
        padding: 0;
        margin-right: 0;
      }
      .navbar-toggler {
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: #343A40;
        /* 清除移動端 fixed 元素抖動問題 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
      }

      .navbar-brand {
        display: none;
        padding-top: 10px;
      }
      .brand-show {
        display: block;
        padding-top: 15px;
      }
      .navbar-collapse {
        width: 100vh;
      }
    }

  </style>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <a class="navbar-brand" href="#">導(dǎo)航</a>
      /* 圖中右上角的按鈕，不需要動畫卻受下面 div 的動畫影響 */
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">鏈接1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">鏈接2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">鏈接3</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">鏈接4</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">鏈接5</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <section class="container-fluid">
    /* 此為需要做動畫的元素 */
    <div class="cover-img"></div>
  </section>
  </div>
  <footer>尾部</footer>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
  <script type="text/javascript">
    $(function ($) {
      $('body').niceScroll()
    })
  </script>
</body>

</html>

希望知道原因的可以給我講講原理，知道解決方法的也麻煩可以告知一下~~
（發(fā)現(xiàn)我用代碼塊把html代碼包裹起來反而一點高亮沒有了？？？）

回答

編輯回答

拽很帥

emmm...也是挺無語的，當(dāng)懟著這個問題來找原因的時候反而找不到，在解決別的問題的時候卻湊巧解決了這個問題。
解決方法如下：
因為fixed定位的按鈕是屬于nav標(biāo)簽的內(nèi)容，而在它下面的div是屬于另外一個父標(biāo)簽。當(dāng)在做動畫的過程中div所在層級被提高了，恰巧大于了nav的層級，所以按鈕標(biāo)簽也就被div蓋住了。解決方法可以是給nav標(biāo)簽添加屬性z-index，只要保證它的值大于div動畫時的值即可解決這個問題。
也不知道解釋的對不對，如果說錯了希望大家指正。