Bootstrap 3: Create an overlay on panel-body

I want to display some information on the panel for which I need a overlay which should be displayed on user raised event. I've created a demo on BootPly: HTML of a single panel:(Rest is written in the link.. NOt relavent to my question) ``` <div class="panel panel-primary" style="box-shadow: 5px 5px 2px #888888;"> <div class="panel-heading"> <h3 class="panel-title"> Vehicle Status Comparison <span class="pull-right"><i class="glyphicon glyphicon-fullscreen" data-toggle="tooltip" data-placement="left" title="Show Full Screen"></i>&nbsp; <i class="glyphicon glyphicon-pushpin" data-toggle="tooltip" data-placement="left" title="Show options"></i>&nbsp; <i class="glyphicon glyphicon-info-sign" data-container="body" data-toggle="popover" data-placement="bottom" title="Information" data-content="This is a very useful information. But I do not know what to write here."> </i>&nbsp; <i class=" glyphicon glyphicon-retweet" data-toggle="tooltip" data-placement="left" title="Toggle Chart"></i>&nbsp; </span> </h3> </div> <div class="panel-body"> <div id="c_VehicleStatusFull"> </div> <div class="overlay" style="display: none"> </div> </div> </div> ``` CSS: ``` .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.85); z-index: 9999; color: white; display: inline-block; } ``` JS: The use of JS is to show and hide the ".overlay" div ``` $('.glyphicon-pushpin').click(function () { $('.overlay').toggle(); }); ``` Note: Please note that in the link I've given, I've hardcoded the `.panel-body` height to 100px but in actual it is adjusted at runtime. Problem: On cliking the "Show options" icon.. The overlay is spread all over the div but I want it to stay within 'div .panel-body'