JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <iframe id="map_frame" frameborder="0" src="http://a.tiles.mapbox.com/v3/vucko.map-1p4ens5h.html#17/45.80611110816038/15.924351969962727"></iframe>
    <div class="box">on "share +" click this div must hide so the share box goes above the div</div>
</div>

CSS

.main{
    position:relative;
}

iframe{
    width:400px;
    height:300px;
}

.box{
    width:150px;
    height:100px;
    background:green;
    position:absolute;
    color:white;
    bottom:50px;
    right:250px;
}

JavaScript

$('#map_frame').contents().find('.share').click(function() {
    alert('click');
    /*$('.box').hide();
    $('.box').css('z-index','1');
    $('.box').css('display','none');*/
});