title: z-index not working as intended
body: <p>I am currently working with Leaflet and Mapbox to create a custom map. All has been working fine until I started to work on the popups.</p>
  
  <p>My situation: I have a custom navigation/control panel that will be used but it needs to be <strong>behind</strong> any open popups (which it currently is not).</p>
  
  <p>I have prepared a <a href="http://jsfiddle.net/q502rttq/" rel="noreferrer">JSFiddle</a> and this screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/qsxYn.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qsxYn.jpg" alt="enter image description here"></a></p>
  
  <p>Part of my CSS is</p>
  
  <pre><code>#map-nav {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
  }
  .leaflet-popup-pane, .leaflet-popup {
    z-index: 1000 !important;
  }
  </code></pre>
  
  <p>The default leaflet classes have <code>z-index</code> of 7 (I think), I just overwrote it to be 100% sure. When inspecting the code in browser (FF/Chrome), I see that the z-index is set properly and no other element in the <code>.leaflet-popup</code> has any <code>z-index</code> set.</p>
  
  <p>I have read that negative <code>z-index</code> may solve this, but as I am working with multiple elements I'd really much like a less "hacky" solution - if there is one. (JavaScript solutions are welcome as well, hence the tag)</p>
  
  <p>As I can see from the code inspection, Leaflet sets some attributes to <code>.leaflet-popup</code> which in terms of position are: <code>transform: translate3d(..)</code>, <code>bottom</code> and <code>left</code>.</p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I can put the <code>#map-nav</code> inside <code>#map-content</code> and it still won't work <a href="http://jsfiddle.net/q502rttq/6/" rel="noreferrer">fiddle</a>. However, when I try to imitate this without alle the map stuff, <a href="http://jsfiddle.net/vnvumsmh/" rel="noreferrer">it does work</a>.</p>