title: z-index not working on Safari when manipulating it using Javascript
body: <p>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. <strong>However, when run on Safari, the nav bar disappears from the get go, while it works fine on Google Chrome and FireFox.</strong>
  I have included the css code and javascript code that dictates this role:</p>
  
  <p>JAVASCRIPT: </p>
  
  <pre><code> //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);
  });
  </code></pre>
  
  <p>CSS (SASS): </p>
  
  <pre><code>/*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;
      &amp;: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;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="resume-container"&gt;
  &lt;ul id="fixed-nav"&gt;
      &lt;li id="nav-education"&gt;education.&lt;/li&gt;
      &lt;li id="nav-experiences"&gt;experiences.&lt;/li&gt;
      &lt;li id="nav-skills"&gt;skills.&lt;/li&gt;
      &lt;li id="nav-projects"&gt;projects.&lt;/li&gt;
      &lt;li id="nav-additional"&gt;additional.&lt;/li&gt;
      &lt;li id="nav-contact"&gt;contact.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="intro-content" class="format-div"&gt;
      &lt;h1 class="type-effect"&gt;
          &amp;lt;h1&amp;gt;I'm Daniel &lt;b&gt;(Sang Don)&lt;/b&gt; Joo&amp;lt;/h1&amp;gt;
          &lt;span class="blinking-cursor"&gt;|&lt;/span&gt;
      &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="edu-content" class="format-div"&gt;
      &lt;h1&gt;education&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sorry about the large amount of code but I'm really unsure of where this problem is rooted. Cheers!</p>