JQuery 影响 Animate 上的 Z-Index

Question

$(window).on("resize", function () {
    if($(window).width() > 1600) { $(".content").css( "width", "1521px" ); }
      if($(window).width() <= 1600 && $(window).width() > 1400) { $(".content").css( "width", "1268px" ); }
      if($(window).width() <= 1400 && $(window).width() > 1200) { $(".content").css( "width", "1015px" ); }
      if($(window).width() <= 1200 && $(window).width() > 1000) { $(".content").css( "width", "762px" ); }
      if($(window).width() <= 1000 && $(window).width() > 800) { $(".content").css( "width", "509px" ); }
      if($(window).width() <= 800) { $(".content").css( "width", "256px" ); }
      
      if($(window).width() <= 500) { 
       $(".mobileDropdown").css({ "top" : "0px"}); 
       $(".topic-1, .topic-2").css( "display", "none" ); 
       $(".brand").css({ "width" : "100%", "padding-left" : "0px" }); 
       
       var calc = $(".header").height() + 10;
       $(".mobileUse").css({ "display" : "block", "margin" : calc + "px" + " auto" }); 
      } else { 
       $(".brand").css({ "width" : "", "padding-left" : "15px" }); 
       $(".mobileUse").css({ "display" : "none"});   
       $(".mobileDropdown").css({ "display" : "none"});  
       $(".topic-1, .topic-2").css({ "display" : "block"});     
      }
   }).resize();
   
   $( ".wideBtn" ).click(function() {
    $(".mobileDropdown").css({ "display" : "block" }); 
    $( ".mobileDropdown" ).animate({
         top: "+=60"
      }, 500, function() { });
   });
   $( ".exitBtn" ).click(function() {
    $( ".mobileDropdown" ).animate({
         top: "-=60"
      }, 500, function() { 
       $(".mobileDropdown").css({ "display" : "none" }); 
      });
   });

body {
background: #212121;
}

.header {
background: #424242;
height: 60px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 1);
color: white;
z-index: 200;
}

.header .brand {
font-family: 'Product Sans', Arial, sans-serif;
font-size: 35px;
padding-top: 10px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
letter-spacing: 1px;
color: white;
text-decoration: none;
}

.header .topics {
height: 100%;
width: 400px;
position: absolute;
top: 0px;
right: 0px;
}

.header .topics .topic-1 {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
height: 75%;
width: 90px;
position: absolute;
right: 50px;
top: 15px;
color: white;
text-decoration: none;
border-bottom: 1px solid transparent;
}

.header .topics .topic-2 {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
height: 75%;
width: 110px;
position: absolute;
right: 200px;
top: 15px;
color: white;
text-decoration: none;
border-bottom: 1px solid transparent;
overflow: hidden;
}

.borderAni {
height: 1px;
width: 110px;
display: none;
background: white;
position: absolute;
bottom: 0px;
left: -110px;
}

.topic-2:hover .borderAni {
left: 110px; 
display: block;
animation-name: sickBorder;
animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

@keyframes sickBorder {
0% {left: -110px; display: block;}
100% {left: 110px; display: block;}
}

.header .mobileUse {
width: 100%;
height: 5px;
z-index: 2;
}

.header .mobileUse .wideBtn {
padding: 5px;
width: 40%;
margin: 0 auto;
}

.header .mobileUse .wideBtn .notiHolder {
width: 64px;
margin: 0 auto;
}

.header .mobileUse .wideBtn .notiHolder .noti {
border: 7px solid #9E9E9E;
border-radius: 100%;
height: 0px;
width: 0px;
margin: 2px;
display: inline-block;
}

.notiHolder {
cursor: pointer;
z-index: 50;
}

.mobileDropdown {
height: 85px;
width: 100%;
background: #757575;
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}

.exitBtn {
width: 64px;
position: absolute;
top: 20px;
right: 0px;
cursor: pointer;
}

.notiE {
border: 6px solid #cccccc;
border-radius: 100%;
height: 0px;
width: 0px;
margin: 2px auto;
display: block;
}

.topicContain {
margin: 5px auto;
width: 90px;
}

.dropTopic-1 {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: white;
position: absolute;
text-decoration: none;
display: block;
}

.dropTopic-2 {
font-family: 'Open Sans', sans-serif;
font-size: 25px;
color: white;
position: absolute;
text-decoration: none;
display: block;
margin-top: 40px;
margin-left: -7px;
}

.topic-1:hover {
animation-fill-mode: forwards;
animation-iteration-count:infinite;
animation-name: borderBottom;
animation-duration: 5s;
}

@keyframes borderBottom {
0% { border-bottom: 1px solid #03A9F4; }
10% { border-bottom: 1px solid #f44336; }
20% { border-bottom: 1px solid #9C27B0; }
30% { border-bottom: 1px solid #3F51B5; }
40% { border-bottom: 1px solid #03A9F4; }
50% { border-bottom: 1px solid #4CAF50; }
60% { border-bottom: 1px solid #FFEB3B; }
70% { border-bottom: 1px solid #FF9800; }
80% { border-bottom: 1px solid #FF5722; }
90% { border-bottom: 1px solid #ffffff; }
100% { border-bottom: 1px solid #4CAF50; }
}

.content {
background: #424242;
padding: 20px;
max-width: 1521px;
margin: 200px auto;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
}

.project:hover {
transform: scale(1.04);
transform-origin: center;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <!-- Navbar -->
 <div class="header">
   <a href="http://www.sethjfreeman.com"><div class="brand" style="padding-left: 15px;">Seth J. Freeman</div></a>
   <div class="topics">
    <a href="">
     <div class="topic-1">Contact</div>
    </a>
    <a href="">
     <div class="topic-2">Who Am I<div class="borderAni"></div></div>
    </a>
   </div>
   <div class="mobileUse" style="display: none;">
    <div class="wideBtn">
     <div class="notiHolder">
      <div class="noti"></div>
      <div class="noti"></div>
      <div class="noti"></div>
     </div>
    </div>
   </div>
   <div class="mobileDropdown" style="display: none;">
    <div class="topicContain">
     <a href=""><div class="dropTopic-1">Contact</div></a>
     <a href=""><div class="dropTopic-2">Who Am I</div></a>
    </div>
    <div class="exitBtn">
     <div class="notiE"></div>
     <div class="notiE"></div>
     <div class="notiE"></div>
    </div>
   </div>
  </div>
  
  <!-- Projects -->
  <div class="content">
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
   <a href=""><img src="/Homepage/Images/placeholder.png" height="150px" width="250px" class="project"></img></a>
  </div>

说明：
注意： 在测试代码段之前，请确保您的屏幕宽度小于 500 像素以获得移动视图。

当您按下带有 3 个圆圈的图标时，会出现一个下拉菜单，但如果您仔细观察，您会发现它位于 header 上方，即使 header 有一个 z-index: 200; 而 mobileDropdown 有一个 z-index: 100;。

我需要做什么才能让 mobileDropdown 在 header 下？

Answer 1

.mobileDropdown 是 header 的 child 元素。要使其落后于 parent（header），请使用 * negative* z-index，例如 z-index: -1

JQuery 影响 Animate 上的 Z-Index

JQuery Affecting Z-Index On Animate

css

jquery

z-index