javascript - 使用 Javascript 操作时 z-index 在 Safari 上不起作用

Question

我正在制作一个具有多层的网站，它通过事件 react (如 onclick)在 Javascript 中操纵 z-index 来回移动。我有一个导航栏，与其他所有元素相比，它的 z-index 值都很大，因为我希望它无论如何都位于最前面。 但是，当在 Safari 上运行时，导航栏会从一开始就消失，但它在 Google Chrome 和 FireFox 上运行良好。 我已经包含了指定此 Angular 色的 css 代码和 javascript 代码:

JavaScript:

 //Global variables representing DOM elements
var introTitleElem = document.getElementById('introduction-title');
var resumeElem = document.getElementById('resume-container');
var introElem = document.getElementById('intro-content');
var eduElem = document.getElementById('edu-content');

//Layer tracker (for transition effect)
var prev = introElem;
var prevButton = "";

//Function that actually changes the layers
function changeLayer(layer, button) {
    if (layer === prev) return;
    introTitleElem.style.opacity = "0";
    prev.style.zIndex = "40";
    layer.style.zIndex = "50";
    layer.style.cssText = "opacity: 1; transition: opacity 0.5s";
    prev.style.zIndex = "5";
    prev.style.opacity = "0";
    prev = layer;
    if (prevButton !== "") prevButton.style.textDecoration = "none";
    button.style.textDecoration = "underline";
    prevButton = button;
}

//Manages events triggered by name button toggle
function revealResume() {
    introTitleElem.style.zIndex = "0";
    resumeElem.style.zIndex = "10";
    resumeElem.style.opacity = "1";
    introElem.style.opacity = "1";
    resumeElem.style.transition = "opacity 0.7s";
    introElem.style.transition = "opacity 0.7s";
}
document.getElementById("name-title").addEventListener("click", revealResume);

 //Manage z-index of different components of the resume and reveal them accordingly
$('#nav-education').click(function () {
    onEducation = true;
    changeLayer(eduElem, this);
});

CSS(SASS):

/*NAVIGATION STYLING*/
#fixed-nav {
  align-self: flex-start;
  overflow-x: hidden;
  float: right;
  z-index: 9999 !important;
  display: flex;
  margin: 1em;

  li {
    margin: 0.6em;
    font: {
      family: $font-plex-sans-condensed;
      size: 0.8em;
    }
    text-align: center;
    color: $lightest-grey;
    transition: color 0.3s;
    &:hover {
      cursor: pointer;
      color: $dark-grey;
      transition: color 0.3s;
    }
  }
}

/*OVERALL DIV FORMATTING*/
.format-div {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}

/*EDUCATION CONTENT STYLING*/
#edu-content {
  background-color: $red-1;
}

HTML:

<div id="resume-container">
<ul id="fixed-nav">
    <li id="nav-education">education.</li>
    <li id="nav-experiences">experiences.</li>
    <li id="nav-skills">skills.</li>
    <li id="nav-projects">projects.</li>
    <li id="nav-additional">additional.</li>
    <li id="nav-contact">contact.</li>
</ul>
<div id="intro-content" class="format-div">
    <h1 class="type-effect">
        &lt;h1&gt;I'm Daniel <b>(Sang Don)</b> Joo&lt;/h1&gt;
        <span class="blinking-cursor">|</span>
    </h1>
</div>
<div id="edu-content" class="format-div">
    <h1>education</h1>
</div>

很抱歉代码量太大，但我真的不确定这个问题的根源在哪里。干杯!

Answer 1

必须是元素的位置特征才能起作用

错误的例子(不工作)

.className { z-index: 99999 !important; }

正确的例子(有效)

.className { 位置:'相对'; z-index: 99999 !important; } .className { 位置:'绝对'; z-index: 99999 !important; } ETC..

祝你好运:)