如果覆盖元素必须具有位置:固定,请告诉我如何应用z-index?在这种情况下,position:fixed;适用于导航,但最重要的是我需要显示菜单按钮。如何做到这一点?
这是我的示例,正确显示在整页上。
[以前,我曾被帮助解释z-index是如何工作的in this example,但是没有诸如position:fixed这样的条件。
$('#nav-btn').on('click', function () {
$('#nav-btn').toggleClass('open');
$('.navigation').toggleClass('is-opened');
});
.navigation.is-opened {
opacity: 1;
pointer-events: auto;
transition: opacity 0s 0s;
}
.navigation.is-opened .navigation__inner {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.navigation {
position: fixed;
width: 100%;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 150;
pointer-events: none;
overflow: hidden;
text-align: center;
color: #fff;
display: block;
transition: opacity 0s 0.3s;
-webkit-overflow-scrolling: touch;
}
.navigation__inner {
background-color: #0c1428;
height: 100%;
position: relative;
width: 223px;
margin-left: auto;
max-width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: translateX(100%);
transform: translateX(100%);
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.navigation__header {
background-color: #0c1428;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 80px;
z-index: 1;
padding: 80px 0 0;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
}
.navigation__content {
padding-top: 80px;
height: 100%;
position: relative;
}
* {
min-width: 0;
min-height: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.navigation__menu {
position: absolute;
left: 0;
top: 180px;
right: 0;
bottom: 0;
overflow: hidden;
padding: 40px 20px 40px 40px;
-webkit-overflow-scrolling: touch;
}
.navigation__content {
padding-top: 80px;
height: 100%;
position: relative;
}
.head-panel {
height: calc(100vh - 217px);
position: relative;
}
.head-panel__slider-wr {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
.head-panel__slider {
opacity: 1 !important;
}
.head-panel__content {
position: relative;
z-index: 1;
}
.head-panel__list {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: calc(100vh - 217px);
}
.head-panel__section--center {
position: relative;
-ms-flex: 1 1;
flex: 1 1;
text-align: right;
padding: 66px 297px;
box-sizing: border-box;
}
.head-panel__section--last {
padding: 64px 32px;
box-sizing: border-box;
background: rgba(12,20,40,0.24);
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
max-width: 223px;
min-width: 223px;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
z-index: 10;
}
#nav-btn {
width: 24px;
height: 24px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
cursor: pointer;
z-index: 10;
}
#nav-btn span {
display: block;
position: relative;
height: 3px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 999;
}
#nav-btn span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(2) {
top: 7px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn span:nth-child(3) {
top: 14px;
width: 70%;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-btn.open span:nth-child(1) {
will-change: transform;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
will-change: transform;
top: 18px;
width: 30px;
}
#nav-btn.open span:nth-child(2) {
will-change: transform;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
will-change: transform;
top: -3px;
width: 30px;
}
#nav-btn.open span:nth-child(3) {
width: 0%;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body class="app home">
<div class="navigation">
<div class="navigation__inner">
<div class="navigation__header">
</div>
<div class="navigation__content">
<div class="navigation__menu">
</div>
</div>
</div>
</div><!-- b:navigation -->
<header class="app-header mt-4">
<div class="head-panel">
<div class="head-panel__slider-wr">
<div class="head-panel__slider animator-zoomOfferScale animator owl-carousel owl-loaded" data-animator="zoomOfferScale"></div>
<div class="head-panel__content">
<div class="head-panel__list">
<div class="head-panel__section head-panel__section--center animator-s9 animator-fadeInRight animator" data-animator="fadeInRight"></div>
<div class="head-panel__section head-panel__section--last animator-s1 animator-fadeInRightBig animator" data-animator="fadeInRightBig">
<div class="" id="nav-btn">
<span></span> <span></span> <span></span>
</div>
</div>
</div>
</div>
</div><!-- b:head-panel -->
</div>
</header>
</body>
</html>
欢迎您!! >>
您在正确的轨道上,只需将z-index
放在如下所示的父容器中
.head-panel { z-index: 222; }
因为
head-panel
是标题的第一父项。
$('#nav-btn').on('click', function () { $('#nav-btn').toggleClass('open'); $('.navigation').toggleClass('is-opened'); });
.navigation.is-opened { opacity: 1; pointer-events: auto; transition: opacity 0s 0s; } .navigation.is-opened .navigation__inner { -webkit-transform: translateX(0%); transform: translateX(0%); } .navigation { position: fixed; width: 100%; right: 0; top: 0; bottom: 0; opacity: 0; z-index: 150; pointer-events: none; overflow: hidden; text-align: center; color: #fff; display: block; transition: opacity 0s 0.3s; -webkit-overflow-scrolling: touch; } .navigation__inner { background-color: #0c1428; height: 100%; position: relative; width: 223px; margin-left: auto; max-width: 100%; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .navigation__header { background-color: #0c1428; position: absolute; left: 0; right: 0; top: 0; height: 80px; z-index: 1; padding: 80px 0 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: auto; } .navigation__content { padding-top: 80px; height: 100%; position: relative; } * { min-width: 0; min-height: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } .navigation__menu { position: absolute; left: 0; top: 180px; right: 0; bottom: 0; overflow: hidden; padding: 40px 20px 40px 40px; -webkit-overflow-scrolling: touch; } .navigation__content { padding-top: 80px; height: 100%; position: relative; } .head-panel { height: calc(100vh - 217px); position: relative; z-index: 222; } .head-panel__slider-wr { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } .head-panel__slider { opacity: 1 !important; } .head-panel__content { position: relative; z-index: 1; } .head-panel__list { position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: calc(100vh - 217px); } .head-panel__section--center { position: relative; -ms-flex: 1 1; flex: 1 1; text-align: right; padding: 66px 297px; box-sizing: border-box; } .head-panel__section--last { padding: 64px 32px; box-sizing: border-box; background: rgba(12,20,40,0.24); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: center; align-items: center; max-width: 223px; min-width: 223px; } #nav-btn { width: 24px; height: 24px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; z-index: 10; } #nav-btn { width: 24px; height: 24px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; z-index: 10; } #nav-btn span { display: block; position: relative; height: 3px; width: 100%; background: #fff; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; z-index: 999; } #nav-btn span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn span:nth-child(2) { top: 7px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn span:nth-child(3) { top: 14px; width: 70%; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #nav-btn.open span:nth-child(1) { will-change: transform; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); will-change: transform; top: 18px; width: 30px; } #nav-btn.open span:nth-child(2) { will-change: transform; -webkit-transform: rotate(30deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); will-change: transform; top: -3px; width: 30px; } #nav-btn.open span:nth-child(3) { width: 0%; opacity: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <body class="app home"> <div class="navigation"> <div class="navigation__inner"> <div class="navigation__header"> </div> <div class="navigation__content"> <div class="navigation__menu"> </div> </div> </div> </div><!-- b:navigation --> <header class="app-header mt-4"> <div class="head-panel"> <div class="head-panel__slider-wr"> <div class="head-panel__slider animator-zoomOfferScale animator owl-carousel owl-loaded" data-animator="zoomOfferScale"></div> <div class="head-panel__content"> <div class="head-panel__list"> <div class="head-panel__section head-panel__section--center animator-s9 animator-fadeInRight animator" data-animator="fadeInRight"></div> <div class="head-panel__section head-panel__section--last animator-s1 animator-fadeInRightBig animator" data-animator="fadeInRightBig"> <div class="" id="nav-btn"> <span></span> <span></span> <span></span> </div> </div> </div> </div> </div><!-- b:head-panel --> </div> </header> </body> </html>