title: Make overlaying div on leaflet not click through
body: <p>How would I make an overlaying <code>div</code> on a leaflet map not clickthrough? I set 
  I tried <code>pointer-events: none</code> and <code>auto</code>, on the overlaying div, but that did not help. Setting <code>pointer-events</code> to <code>none</code> had the effect that the <code>radiobutton</code> is not clickable anymore...</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-js lang-js prettyprint-override"><code>// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
  // Creating a tile layer usually involves setting the URL template for the tile images
  var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osmAttrib = '&amp;copy; &lt;a href="http://openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',
    osm = L.tileLayer(osmUrl, {
      maxZoom: 18,
      attribution: osmAttrib
    });
  
  // initialize the map on the "map" div with a given center and zoom
  var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);
  
  // Script for adding marker on map click
  function onMapClick(e) {
  
    var marker = L.marker(e.latlng, {
        draggable: true,
        title: "Resource location",
        alt: "Resource Location",
        riseOnHover: true
      }).addTo(map)
      .bindPopup(e.latlng.toString()).openPopup();
  
    // Update marker on changing it's position
    marker.on("dragend", function(ev) {
  
      var chagedPos = ev.target.getLatLng();
      this.bindPopup(chagedPos.toString()).openPopup();
  
    });
  }
  
  map.on('click', onMapClick);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
      height: 500px;
      width: 80%;
      z-index: 1;
      position: relative;
  }
  
  .overlay {
    height: 500px;
    width: 100px;
    position: absolute;
    right: 0px;
    z-index: 2;
    background-color: rgba(255, 50, 50, 0.5);
    pointer-events: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"&gt;&lt;/script&gt;
  &lt;link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet" /&gt;
  
  &lt;div id="map"&gt;
    &lt;div class = "overlay"&gt;
      &lt;input type="radio" class = "someButton"&gt;Foo Bar
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>