JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="box" class="oculto">BOX BOX</div>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
    21<br>32<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40<br>
 
<button onclick="$('#box').hide();">Hide the box </button><br>  
<button onclick="$('#box').show();">Show the box </button><br>     
 <img src="http://static.adzerk.net/Advertisers/4c4f1be011a447efbce49c1811022e7a.png" width="330" border="0" usemap="#Map" /> 

</div>

<map name="Map" id="Map">
<area shape="rect" coords="3,3,320,84" onclick="$('#box').hide();"/>   
    </map>

CSS

#container {
    width: 400px;
    background-color:yellow;
    position:relative; 
    z-index:2;
    min-height:1000px;
}

#box{
    width:400px; 
    height:100px;
    position:fixed;
    top:0;
    z-index:100000;
    background-color:black;
    color:yellow;
    opacity:0.5;
    padding:10px;
}