我正在做一个菜单,我需要它的孩子具有较大的z索引,以便在打开该菜单时它位于模态的顶部.它完美地工作,但是当我将菜单设置为“ position：fixed”并打开模态时,孩子被保留在模态后面.这是代码,忽略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; */}.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,.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 ></div> <div > <ul > <li><a href="#">Home</a></li> <li > <a href="#" > <span ID="bar-one"></span> <span ID="bar-two"></span> <span ID="bar-three"></span> </a> </li> </ul> </div> <div > <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>您必须增加容器的z-index
const btn = document.querySelector('.btn'),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,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 ></div> <div > <ul > <li><a href="#">Home</a></li> <li > <a href="#" > <span ID="bar-one"></span> <span ID="bar-two"></span> <span ID="bar-three"></span> </a> </li> </ul> </div> <div > <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>这样做会使所有容器都位于覆盖层上方,这也不是必需的结果.
万一您希望叠加层像最初一样运行,唯一的方法是将其放置在position：fixed元素内,然后将响应菜单移到该位置,以便使所有元素再次属于同一堆叠上下文,并且可以根据需要调整z-index
const btn = document.querySelector('.btn'),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,.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%,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 > <div ></div> <ul > <li><a href="#">Home</a></li> <li > <a href="#" > <span ID="bar-one"></span> <span ID="bar-two"></span> <span ID="bar-three"></span> </a> </li> </ul> <div > <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>如果无法更改HTML,则没有机会获得所需的内容.
相关问题以获取有关堆叠上下文和绘画顺序的更多详细信息：
Why elements with z-index can never cover its child?
How to z-index a repositioned div in css? 总结
以上是内存溢出为你收集整理的javascript-固定位置上的父项时Z索引不起作用 全部内容，希望文章能够帮你解决javascript-固定位置上的父项时Z索引不起作用 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）