z-index not working on Safari when manipulating it using Javascript

Question

I am making a website that has multiple layers to it, which is brought back and forth by manipulating the z-index in Javascript through event reactions (like onclick). I have a navigation bar which has a large z-index value compared to every other element as I would like it to be at the very front regardless of anything. However, when run on Safari, the nav bar disappears from the get go, while it works fine on Google Chrome and FireFox. I have included the css code and javascript code that dictates this role:

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>

Sorry about the large amount of code but I'm really unsure of where this problem is rooted. Cheers!

Answer 1

it has to be the position feature of the elements so that it can work

wrong example ( not working )

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

correct example ( it work )

.className { position: 'relative'; z-index: 99999 !important; } .className { position: 'absolute'; z-index: 99999 !important; } etc..

good luck :)