.wrap {
background-color: #393939;
height: inherit;
}
/*-----------------------header---------------------------------------------------------*/
.header-inner {
background-color: #393939;
width: 100%;
height: 70px;
/* [disabled]display: flex; */
position: fixed;
top: 0;
}
.pclogo {
display: none;
}
.tabletlogo {
display: none;
}
.line {
display: none;
}
a .mobilelogo {
width: 215px;
height: auto;
margin-top: 10px;
display: block;
margin-right: auto;
margin-left: auto;
cursor: pointer;
}
/*doesn't show the navigation bar*/
.navbar {
display: none
}
/*---------------------hamburger-----------------------*/
.hamburger {
display: block;
position: absolute;
top: 10px;
right: 3.3%;
cursor: pointer;
float: right;
z-index: 4/*important!!! humburger menu comes on the top of side menu*/
}
.bar1,
.bar2,
.bar3 {
width: 26px;
height: 3px;
/* Original 5px*/
margin: 8px 0;
/* Original 6px*/
transition: 0.6s;
background-color: white;
border-radius: 3px;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: translate(0px, 5.5px) rotate(-45deg);
/*move →0px ↓5.5px(hight of bar/2+margin/2) and lotate ↺45°*/
transform: translate(0px, 5.5px) rotate(-45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/* Fade out the second bar */
/*.change .bar2 {
opacity: 0;
}*/
/* Rotate last bar */
.change .bar3 {
-webkit-transform: translate(0px, -5.5px) rotate(45deg);
transform: translate(0px, -5.5px) rotate(45deg);
background-color: rgba(207, 207, 207, 1.00);
}
/*---dropdown menu---*/
.dropdown {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
/*important!!! humburger menu comes on the top of side menu*/
top: 0;
right: 0;
background-color: #393939;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
text-align: center;
}
.dropdown a {
display: none;
transition: 0.4s;
}
/*---dropdown menu withdraw---*/
.change.dropdown {
height: 100%;
width: 50%;
position: fixed;
z-index: 3;
top: 0;
right: 0;
background-color: rgba(69, 69, 69, 0.90);
/*Color Transparency of side menu*/
overflow-x: hidden;
transition: 0.6s;
padding: 68px 0 0 0;
/* control the space above "Home"*/
text-align: center;
}
/*---dropdown menu effect---*/
.change.dropdown a {
padding: 10px 5px;
font-family: 'Kozuka Gothic Pr6N';
font-size: 18px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
border-bottom: rgba(163, 161, 161, 0.77);
}
.dropdown a::before {
-webkit-transition-duration: 0.3s;
/* Safari */
transition-duration: 0.3s;
content: attr(data-hover);
/*The attr() property inserts a specified attribute's value before or after the selected element(s).*/
}
.dropdown a:hover {
border-left: 2px solid rgba(255, 255, 255, 0.70);
border-right: 2px solid rgba(255, 255, 255, 0.70);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
color: rgba(255, 255, 255, 0.70);
}
/*---------------------hamburger---------------------------*/
/*---------------------------------------------header----------------------------------------------*/
/*----------------------------------------------Main----------------------------------------------*/
.main-inner {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
vertical-align: bottom;
padding-top: 70px;
/*-------important!!!!!-------*/
}
.slideimage-container img {
height: inherit;
width: 100%;
/* [disabled]padding-top: 90px; */
/* [disabled]padding-bottom: 70px; */
object-fit: cover;
object-position: center;
overflow: hidden;
}
/*----------update list-----------*/
.update-container {
padding: 5px;
width: 100%;
}
.update-container table {
margin: 0 auto;
}
.update-container table tr {
color: white;
font-size: 10px;
font-family: 'Kozuka Gothic Pr6N';
text-align: left;
font-weight: thin;
padding: 5px 10px;
vertical-align: top;
}
/*----------------------------------------------Main----------------------------------------------*/
/*----------------------------------------------Footer----------------------------------------------*/
.footer-inner {
width: 100%;
/* [disabled]padding-top: 15px; */
/*space between Main and Footer*/
height: 28px;
bottom: 0;
position: fixed;
background-color: #393939;
z-index: 1;
}
.line-footer {
display: none;
/* [disabled]width: 100%; */
/* [disabled]height: 1px; */
/* [disabled]border-bottom: 1px solid white; */
/* [disabled]margin-bottom: 15px; */
/* [disabled]position: absolute; */
}
.copyright {
width: 100%;
float: right;
font-family: 'Kozuka Gothic Pr6N';
color: #ffffff;
font-size: 0.5px;
bottom: 0px;
padding: 10px 5px 0 0;
/* [disabled]margin-right: 5px; */
text-align: right;
/* [disabled]position: absolute; */
}
/*----------------------------------------------Footer----------------------------------------------*/<body oncontextmenu="return false">
<div class="wrap">
<!-- to define the maximum width -->
<!-- Header -->
<header>
<div class="container">
<div class="header-inner">
<!-- Header Flex (logo and navbar) -->
<!-- Hamburger -->
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<!-- <div class="bar2"></div> -->
<div class="bar3"></div>
</div>
<div id="myDIV" class="dropdown" role="navigation">
<a href="index.html">Home</a>
<a href="News/index.html">News</a>
<a href="Concept/index.html">Concept</a>
<a href="Profile/index.html">Profile</a>
<a href="Works/index.html">Works</a>
<a href="Contact/index.html">Contact</a>
</div>
<!-- x is used to change hamburger menu, y is used to change side menu width -->
<script>
function myFunction(x) {
x.classList.toggle("change");
var y = document.getElementById("myDIV");
y.classList.toggle("change");
}
</script>
<!-- Hamburger -->
<ul class="navbar" role="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="News/index.html">News</a></li>
<li><a href="Concept/index.html">Concept</a></li>
<li><a href="Profile/index.html">Profile</a></li>
<li><a href="Works/index.html">Works</a></li>
<li><a href="Contact/index.html">Contact</a></li>
</ul>
<div class="line"></div>
</div>
</div>
</header>
<!-- Main Content -->
<main>
<div class="container">
<div class="main-inner">
</div>
</div>
<div class="container">
<div class="update-container">
</div>
</div>
</main>
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-inner">
<div class="line-footer"></div>
<div class="copyright">
Copyright © 小野寺康都市設計事務所. All rights reserved.
</div>
</div>
</div>
</footer>
<!-- End Footer -->
</div>
</body>
z索引
在侧边菜单下显示主要内容顶部的页脚
.dropdown `{height: 100%;width: 0;position: fixed;z-index: 3;/*important!!! humburger menu comes on the top of side menu*/top: 0;right: 0;background-color: #393939;overflow-x: hidden;transition: 0.5s;padding-top: 60px;text-align: center;}`
.hamburger `{display: block;position: absolute;top: 10px;right: 3.3%;cursor: pointer;float: right;z-index: 4/*important!!! humburger menu comes on the top of side menu*/}`
.footer-inner `{width: 100%;/* [disabled]padding-top: 15px; *//*space between Main and Footer*/height: 28px;bottom: 0;position: fixed;background-color: #393939;z-index: 1;}`
页脚（z-index：1）应显示在侧边菜单（z-index：3）和汉堡包（z-index：4）下。
如果我将页脚的z-index更改为-1，它会得到所需的结果，但是页脚会出现在主要内容之后......
我想在侧边菜单下的主要内容之上保持页脚。
答案 0 :(得分：2)
z-index可能很棘手，因为它与包含z-index 相对。对于定位（意为z-index，relative，absolute或fixed）的任何对象，都会计算sticky。
由于.header-inner为fixed，因此计算出的z-index为0.现在，因为z-index与包含z-index相关，所以.inner-footer 1}} z-index 相对于z-index 0 ，因此嵌套在z-index中的任何.header-inner将无法放在.header-inner顶部的块顶部，除非您将.header-inner的{{1}}更改为更大的值。
这最终意味着您的z-index的{{1}}为1竞争而.inner-footer为0，因此除非您更改，否则它将始终排在最前面将z-index与大于1的值竞争（将其更改为2）。
为了更清楚z-index和z-index嵌套.hamburger值，您可以将它们分别更改为.change.dropdown和z-index，它们将会具有与现在相同的效果。
参见修改后的代码：
21
答案 1 :(得分：0)
尝试将z-index:2添加到您的.header-inner课程中，看看您是否获得了所需的结果。