影响 Z-Index 的 JQuery 动画

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 像素以获得移动 View 。

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

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

Answer 1

.mobileDropdown 是 header 的子元素。要使其位于其父级(标题)之后，请使用 * negative* z-index，例如 z-index: -1