Z-index is not working when parent on position fixed Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!z-index not working with fixed positioningWhy elements with any z-index value can never cover its child?How to z-index a repositioned div in cssHow do JavaScript closures work?Retrieve the position (X,Y) of an HTML elementHow to insert an item into an array at a specific index (JavaScript)?Is there a CSS parent selector?When to use margin vs padding in CSSMake the cursor a hand when a user hovers over a list itemHow to decide when to use Node.js?z-index not working with fixed positioningoffsetting an html anchor to adjust for fixed headerCannot display HTML string
Would "destroying" Wurmcoil Engine prevent its tokens from being created?
Fundamental Solution of the Pell Equation
How do pianists reach extremely loud dynamics?
What is the meaning of the simile “quick as silk”?
Significance of Cersei's obsession with elephants?
Is grep documentation wrong?
Wu formula for manifolds with boundary
Why are there no cargo aircraft with "flying wing" design?
Should I use a zero-interest credit card for a large one-time purchase?
Why aren't air breathing engines used as small first stages
Generate an RGB colour grid
What does this Jacques Hadamard quote mean?
Irreducible of finite Krull dimension implies quasi-compact?
How to react to hostile behavior from a senior developer?
Do jazz musicians improvise on the parent scale in addition to the chord-scales?
How come Sam didn't become Lord of Horn Hill?
Around usage results
Is "Reachable Object" really an NP-complete problem?
Is there a kind of relay only consumes power when switching?
How to find all the available tools in mac terminal?
Can an alien society believe that their star system is the universe?
What do you call the main part of a joke?
What are the out-of-universe reasons for the references to Toby Maguire-era Spider-Man in ITSV
How to compare two different files line by line in unix?
Z-index is not working when parent on position fixed
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!z-index not working with fixed positioningWhy elements with any z-index value can never cover its child?How to z-index a repositioned div in cssHow do JavaScript closures work?Retrieve the position (X,Y) of an HTML elementHow to insert an item into an array at a specific index (JavaScript)?Is there a CSS parent selector?When to use margin vs padding in CSSMake the cursor a hand when a user hovers over a list itemHow to decide when to use Node.js?z-index not working with fixed positioningoffsetting an html anchor to adjust for fixed headerCannot display HTML string
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
3
I'm doing a menu and i need its child to have a large z-index so that it´s on top of a modal when this is opened. it works perfectly, but when i set the menu to 'position: fixed' and open the modal, the child is kept behind the modal. Here is the code, ignore the last part of the css, which is just animations. Thanks for the help.
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>javascript html css
asked Mar 8 at 18:46
SantiagoSantiago
324
add a comment |
3
I'm doing a menu and i need its child to have a large z-index so that it´s on top of a modal when this is opened. it works perfectly, but when i set the menu to 'position: fixed' and open the modal, the child is kept behind the modal. Here is the code, ignore the last part of the css, which is just animations. Thanks for the help.
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>javascript html css
asked Mar 8 at 18:46
SantiagoSantiago
324
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08
add a comment |
3
3
3
1
I'm doing a menu and i need its child to have a large z-index so that it´s on top of a modal when this is opened. it works perfectly, but when i set the menu to 'position: fixed' and open the modal, the child is kept behind the modal. Here is the code, ignore the last part of the css, which is just animations. Thanks for the help.
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>javascript html css
asked Mar 8 at 18:46
SantiagoSantiago
324
I'm doing a menu and i need its child to have a large z-index so that it´s on top of a modal when this is opened. it works perfectly, but when i set the menu to 'position: fixed' and open the modal, the child is kept behind the modal. Here is the code, ignore the last part of the css, which is just animations. Thanks for the help.
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
/* position: fixed; */
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>javascript html css
javascript html css
asked Mar 8 at 18:46
SantiagoSantiago
324
asked Mar 8 at 18:46
SantiagoSantiago
324
asked Mar 8 at 18:46
SantiagoSantiago
324
asked Mar 8 at 18:46
SantiagoSantiago
324
asked Mar 8 at 18:46
SantiagoSantiago
324
324
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08
add a comment |
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08
add a comment |
1 Answer
1
active
oldest
votes
2
position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55069237%2fz-index-is-not-working-when-parent-on-position-fixed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
add a comment |
2
position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
add a comment |
2
2
2
position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
position:fixed create a stacking context forcing all the element inside to be painted inside. Your issue is that now, the overlay is covering the menu container including all its element and setting a higher z-index to elements inside will do nothing. In your case it's the button container that you can no more move outside that stacking context.
You have to increase the z-index of the container
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>Doing this will make all the container to be above the overlay which is also not the needed result.
In case you want the overlay to behave as it was intially, your only way is to make it inside the position:fixed element and also move the responsive menu there, so you make all the elements to belong again to the same stacking context and you can adjust the z-index like you want
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>If you cannot change the HTML, you have no chance to obtain what you want.
Related question to get more details about stacking context and painting order:
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css?
const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
z-index:1000;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: -100%;
z-index: 100;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-overlay"></div>
<div class="menu-container">
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
</div>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>const btn = document.querySelector('.btn'),
overlay = document.querySelector('.menu-overlay'),
menu = document.querySelector('.responsive'),
close = document.querySelector('.close'),
barTop = document.querySelector('#bar-one'),
barMiddle = document.querySelector('#bar-two'),
barBottom = document.querySelector('#bar-three');
btn.addEventListener('click', function()
overlay.classList.toggle('active');
menu.classList.toggle('menuActive');
barTop.classList.toggle('barTop');
barMiddle.classList.toggle('barMiddle');
barBottom.classList.toggle('barBottom');
)*
margin: 0;
padding: 0;
box-sizing: border-box;
.menu-container
background: teal;
padding: 10px 0;
width: 100%;
/* here is the issue i´m talking about */
position: fixed;
.menu
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
margin: 0 auto;
.menu li
list-style: none;
padding: 5px;
.menu li a
font-family: sans-serif;
text-decoration: none;
color: #fff;
.btn-container
z-index: 10000 !important;
.btn
text-decoration: none;
display: flex;
width: 22px;
height: 18px;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
.btn span
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all .3s;
.btn #bar-one.barTop
transform: translateY(8px) rotate(45deg);
.btn #bar-three.barBottom
transform: translateY(-8px) rotate(-45deg);
.btn #bar-two.barMiddle
opacity: 0;
.menu-overlay
position: fixed;
width: 100%;
top: 0;
bottom: 0;
background: rgba(0,0,0,.8);
animation: fadeOverlay .3s linear;
display: none;
z-index: 99;
.menu-overlay.active
display: block;
@keyframes fadeOverlay
0%
opacity: 0;
100%
opacity: 100%;
.responsive
width: 100%;
height: 100vh;
position: fixed;
z-index:100;
top: 0;
left: -100%;
z-index: 99;
transition: left .2s ease-in-out;
.responsive ul
display: flex;
flex-direction: column;
background: #000;
width: 87%;
height: 100%;
padding: 20px;
.responsive ul li
padding: 5px;
.responsive ul li a
text-decoration: none;
color: #fff;
.responsive.menuActive
left: 0;
.close
text-decoration: none;
display: block;
color: #fff;
width: 10%;
position: absolute;
top: 0;
right: 0;
font-size: 40px;
text-align: center;
margin-top: 5px;
.close.closeActive
animation: fadeClose .4s linear;
@keyframes fadeClose
0%, 90%
opacity: 0;
100%
opacity: 1;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Menu Celular</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="menu-container">
<div class="menu-overlay"></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li class="btn-container">
<a href="#" class="btn">
<span id="bar-one"></span>
<span id="bar-two"></span>
<span id="bar-three"></span>
</a>
</li>
</ul>
<div class="responsive">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Exit</a></li>
</ul>
</div>
</div>
<script src="./js.js" charset="utf-8"></script>
</body>
</html>answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
edited Mar 8 at 19:47
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
answered Mar 8 at 19:25
Temani AfifTemani Afif
83.6k104795
83.6k104795
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
add a comment |
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
This was helpful for me to understand the limitations of z-index youtube.com/watch?v=l55hSbBUdmQ
– hajile78
Mar 8 at 19:45
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
By putting everything inside the div i was able to do it, thanks!
– Santiago
Mar 8 at 20:49
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55069237%2fz-index-is-not-working-when-parent-on-position-fixed%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Possible duplicate of z-index not working with fixed positioning
– Nick
Mar 8 at 18:51
I tried the solutions of that article but it doesn´to work in this case. I think because in that article there are two separate divs, while i´m working with parent-child.
– Santiago
Mar 8 at 19:08