title: Z-Index not working on Safari - fine on Firefox and Chrome
body: <p>The Z-index isn't rendering properly on Safari - but it is working fine on Chrome and Firefox. I can't figure out what the Safari specific bug would be. </p>
  
  <p>Here is the relevant code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container{
          display: inline-flex;
          align-items: center;
          justify-content: center;
          }
  
          .flex-item{
          margin-left: 14%;}
  
  
          #inner-ul2{
          margin-left: 70px;}
  
  
          #inner-navbar{
          z-index: 1;
          background-color: white;
          overflow: hidden;
          margin-top: 50px;
          box-shadow: 0px 10px 10px #444444;}
  
          .inner-buttons{
          background-color: white;
          overflow: hidden;
          color: black;
          font-family: Roboto;
          font-weight: 300;
          font-size: large;}
  
          .inner-buttons-left{
          overflow: hidden;
          margin-right: 45px;}
  
          .inner-buttons-right{
          overflow: hidden;
          margin-left: 40px;}
  
  
          #inner-logo{
          position:fixed;
          z-index: 2;
          display: inline-block;
          float: none;
          height: 100px;
          width: 120px;
          margin-top: -20px;
          margin-left: -25px;
          margin-right: auto;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
          box-shadow: 0px 20px 10px -10px #444444;
          }
  
          .navbar .navbar-nav{
          display: inline-block;
          float: none;
          vertical-align: middle;}
  
  
          #slider{
          z-index: -1;
          padding: 0;
          overflow: hidden;
          border-style: none;
          margin-top: 30px;
          margin-bottom: 0px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row-fluid"&gt;
                              &lt;div class="navbar subnav navbar-fixed-top" id="inner-navbar"&gt;
                                  &lt;div class="navbar-inner"&gt;
                                  &lt;div class="flex-container"&gt;
                                 &lt;span class="flex-item"&gt;&lt;ul class="nav navbar-nav" id="inner-ul"&gt; 
                               &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="/home/"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                                   &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="#"&gt;SHOP&lt;/a&gt;&lt;/li&gt;
                                   &lt;li&gt;&lt;a class="inner-buttons inner-buttons-left" href="#"&gt;OPPORTUNITY&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                                  &lt;ul class="nav navbar-nav"&gt;
                                  &lt;li href="#"&gt;&lt;img id="inner-logo" src="http://placehold.it/120x100"&gt;&lt;/li&gt;&lt;/ul&gt;
                                  &lt;ul class=" nav navbar-nav" id="inner-ul2"&gt;
                                  &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;HAPPENINGS&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="inner-buttons inner-buttons-right" href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                                  &lt;/span&gt;&lt;/div&gt;       
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
              &lt;div class="row-fluid"&gt;
                  &lt;div id="slider" class="flexslider"&gt;
                      &lt;ul class="slides"&gt;
                          &lt;li&gt;
                          &lt;img src="{{ url_for('static', filename='images/ProductsSlider.jpg') }}"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;img src="{{ url_for('static', filename='images/NaturalSlider.jpg') }}"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;img src="{{ url_for('static',         filename='images/ExcellSlider.jpg') }}"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!--/div--&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here are some images showing the differences between the browser looks:</p>
  
  <p><a href="https://i.stack.imgur.com/g1t6v.jpg" rel="noreferrer">Chrome</a>
  <a href="https://i.stack.imgur.com/4n2Tj.jpg" rel="noreferrer">Safari</a></p>
  
  <p>I am using both Bootstrap and JQuery. </p>
  
  <p>Thanks for the help!</p>