设置为固定在顶部的顶部导航行为不正确

Question

我将顶部导航栏设置为粘在顶部，但它在某些地方表现得很奇怪。 这是小提琴链接https://jsfiddle.net/benjaminana77/pugek2f8/30/，我在下面复制了代码。

我在三个地方遇到了问题

1. 在英雄图像部分，顶部导航背景错误地是透明的。我将背景颜色设置为白色，而不是透明。

1. 顶部导航栏错误地显示 BEHIND 滑块，而不是滑块上方。

1. 当您将鼠标悬停在网格布局中的某个项目上时，该项目会显示在顶部导航栏上方。

正常状态：

当您将鼠标悬停在图像上时：

非常感谢！

HTML:

<div class="boxA">

<div class="box1">
  <div class="site">
    <a href=""><img src="img/logo.png"></a>
  </div> 
</div>

<div class="box2">
<nav class="menu"> 
  <ul>
      <li><a href="#conD">menu1</a></li>
      <li><a href="#conG">menu2</a></li>
      <li><a href="#conH">menu3</a></li>
      <li><a href="#conI">menu4</a></li>
  </ul>
</nav>
</div>

</div>


<div class="body-part">

<section class="conA">
<div id="container">
  <div id="heroText">
     <p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit</p>
    <div id="text"></div>
  </div>
  <div id="images"></div>
</div>
</section>


  <ul class="slider" style="padding:0px !important;">
    <li><img src="img/sample.png">
    <div class="caption1">caption 1</div>
    </li>

    <li> <img src="img/Group 3.png">
    <div class="caption2"></div>
    <div class="caption3">caption 2</div>
    <div class="caption5">caption 3</div>
    <div class="caption4">caption 4</div>
    </li>
 </ul>
 
 
 

<section id="conD">
<div class="container">
  <div class="grid menu-content" id="menu1-content">
  
   <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG);"></div>
      <div class="text">
      <h3>Title </h3>
      <p>Lorem ipsum dolor </p>
      </div>
    </a>
  </article> 


   <article> 
    <a href="#">
      <div class="photo" style="background-image: url(img/sample.jpg);"></div>
      <div class="text">
      <h3>Headingg</h3>
      <p>Lorem ipsum dolor </p>
      </div>
    </a>
  </article> 


   <article> 
    <a href="#">
      <div class="photo" style="background-image: url(img/sample.jpg);"></div>
      <div class="text">
      <h3>Headingg</h3>
      <p>Lorem ipsum dolor </p>
      </div>
    </a>
  </article> 
  
  </div>

</div> 
</section>

CSS：

.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: fixed; 
  border-bottom: 1px solid #E0DCDC;
  top: 0;
  width: 100%;
  background-color: white;
  max-width: 1440px;



}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  width: 20%;
  height: auto;
}

#top-logo {
  margin-top: 40px;
}


#top-logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
}



body {
  font-family: gotham;
  margin: 0px  !important;
  color: #827F88;
  letter-spacing: 0.4px; 
  line-height: 1.9;
}


.conA {
  height: 100vh;
  display: flex; 
  position: relative;
}


.conA #container {
  margin: 0;
  display: flex; 
  align-items: flex-start;
  position: absolute;
  top: 50%;
  left: 10%;
    transform: translate(0%, -50%);
}

#heroText {
  font-size: 37px;
  color: #56525E;
  line-height: 1 !important;
}


.conA #heroText {
  height: 400px;
  padding-top: 100px;
}






#conD ul {
  margin: 0 0 30px -30px;
  padding: 0;
  list-style: none;
}


#conD li  {
  padding: 35px;
  display: block;
  text-decoration: none;
  font-size: 15.5px;
  letter-spacing: 2px;
  color: inherit;
}


#conD li {
  float: left; 
  width: auto;
}

#conD ul:after {
  content:"";
  display: block;
  clear: both;
}


#conD .menu {
  margin-bottom: 20px
}


.grid {
  display: grid;
  justify-content: start; 
  margin-top: -20px;
} 


.grid .photo {
  width: 100%;
  background-size: contain;
  background-position: center;
}

.grid .photo:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.grid a {
  display: block;
  text-decoration: none;
  color: inherit;

}

.grid a:hover {
  opacity: 0.8;
}

查询：

$(document).ready(function(){
      $('.slider').bxSlider({
      auto: true,
      pause: 3000,
       mode: 'fade',
       speed: 1200, 
      pager: false  
});
    });


(function ($) {
  $(document).ready(function(){

    // hide .navbar first
    $(".boxA").hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 50) {
                $('.boxA').fadeIn();
                $('#top-logo').fadeOut();


            } else {
                $('.boxA').fadeOut();
                $('#top-logo').fadeIn();

            }
        });
    });

});
  }(jQuery));

Answer 1

在.boxA上添加z-index:2

.boxA {
    height: 90px;
    position: fixed;
    border-bottom: 1px solid #E0DCDC;
    top: 0;
    width: 100%;
    background-color: white;
    max-width: 1440px;
    z-index: 2;
}
.body-part{
   position: relative;
   z-index: 1;
}

https://jsfiddle.net/lalji1051/24rm0yvt/

更新链接 - https://jsfiddle.net/lalji1051/24rm0yvt/3/