$(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？
最佳答案
.mobileDropdown 是 header 的子元素。要使其位于其父级(标题)之后，请使用 * negative* z-index，例如 z-index: -1
关于影响 Z-Index 的 JQuery 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44747125/