title: Z-Index on Fixed element outside of FullPage.js
body: <p>I'm trying to create what I think would be a cool content effect, whereby a dark semi-transparent background covers the entire screen while certain content rises above it, thus creating a highlight effect. I'm a massive <code>JS</code> amateur but I've been using <code>fullPage.js</code> (<a href="https://github.com/alvarotrigo/fullPage.js/" rel="nofollow">https://github.com/alvarotrigo/fullPage.js/</a>) to create a scrolling content area, and also used a small drop down <code>jQuery</code> within the <code>FullPage</code>. I set up a function to bring my darkness <code>div</code> to the foreground, and it covers the entire screen as I expected, however, the drop down list within the <code>fullPage</code> simply won't rise above it, no matter what I try.</p>
  
  <p>CSS of the darkness div:</p>
  
  <pre><code>#darkness {
  background:rgba(0, 0, 0, 0.5);
  display:none;
  height:100%;
  left:0;
  position: fixed;
  top:0;
  width:100%;
  z-index:10;
  }
  </code></pre>
  
  <p>This is my JS function: </p>
  
  <pre><code>function thedarkside () {
  
      console.log ('the dark side');
      $('#darkness').fadeTo(200, 1);
  }
  </code></pre>
  
  <p>All of that works as intended. However I can't get my drop down <code>#dd</code> to have a <code>z-index</code> higher than darkness div. This is the general structure of the <code>FullPage.js</code>:</p>
  
  <pre><code>Darkness --&gt;
  &lt;-- Darkness
  
      Fullpage --&gt;
          Section --&gt;
              Form --&gt;
                  Dropdown --&gt;
                  &lt;-- Dropdown
              &lt;-- Form
          &lt;-- Section
      &lt;--Fullpage
  </code></pre>
  
  <p>I set the <code>z-index</code> of drop down to something ridiculous like 100, as I don't want any of the other elements to be above the darkness div. I really only want <code>Dropdown</code>to be above. Anyway if anyone could help me achieve this affect I'd really appreciate it. I'm ok if the solution lies in <code>JS</code> as opposed to <code>CSS</code>.</p>
  
  <p>Thanks,<br>
  Mike</p>