Z-index applied to footer doesn't work - html

Question

.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">
Home
News
Concept
Profile
Works
Contact
</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>Home</li>
<li>News</li>
<li>Concept</li>
<li>Profile</li>
<li>Works</li>
<li>Contact</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-index
show the footer on top of main contents under the side 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;}`
.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;}`
Footer(z-index:1) should be showed under the side menu(z-index:3) and hamburger(z-index:4).
If I changed z-index of footer to -1, it gets the desired result, but then footer comes behind the main contents...
I want to keep footer on top of main contents under the side menu.

Answer 1

z-index can be tricky because it is relative to the containing z-index. A z-index is calculated for any object that is positioned (meaning relative, absolute, fixed, or sticky).
Because .header-inner is fixed, it has a calculated z-index of 0. Now, because z-index is relative to the containing z-index, your .inner-footer's z-index is relative to z-index 0, so any z-index that is nested in .header-inner will not be able to be placed on top of a block that is on top of .header-inner unless you change .header-inner's z-index to a greater value.
This ultimately means that your .inner-footer's z-index of 1 is competing vs. a z-index of 0, so it will always be placed on top unless you change the competing z-index to a value greater than 1 (change it to 2).
To make it clearer that .hamburger and .change.dropdown have nested z-index values, you can change these to 2 and 1, respectively, and they will have the same effect as they do now.
See the modified code:
.wrap {
background-color: #393939;
height: inherit;
}
/*-----------------------header---------------------------------------------------------*/
.header-inner {
background-color: #393939;
width: 100%;
height: 70px;
/* [disabled]display: flex; */
position: fixed;
z-index: 2; /* to place this on top of footer */
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: 2 /*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: 1; /* below hamburger */
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; */
}
<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">
Home
News
Concept
Profile
Works
Contact
</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>Home</li>
<li>News</li>
<li>Concept</li>
<li>Profile</li>
<li>Works</li>
<li>Contact</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>

Answer 2

Try adding z-index:2 to your .header-inner class and see if you get the desired result.