Leaflet demo

For update marker position

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div 
  id="map">
  <div 
  id='parent-div'
  class='some-div'>
   I am the parent! Like the leaflet map, I don't want the mouse events clicking/scrolling bubbling onto me neither.
    <div 
      class='some-div'
      id='no-scrolling-clicking'>
      Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me!
    </div>
  </div>
</div>

CSS

#map {
    height: 500px;
    width: 100%;
}

.some-div {
  position: absolute;
  bottom: 7px;
  left: 7px;
  overflow-y: auto;
}

#parent-div {
  background-color: lightgreen;
  height: 400px;
  width: 200px;
  z-Index: 998;
}

#no-scrolling-clicking {
  font-weight: bold;
  font-size: 20px;
  color: white;
  z-index: 999;
  background-color: hotpink;
  width: 150px;
  height: 300px;
}

JavaScript

const osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});

var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);