title: Bootstrap 3: Create an overlay on panel-body
body: <p>I want to display some information on the panel for which I need a overlay which should be displayed on user raised event.</p>
  
  <p>I've created a demo on <a href="http://www.bootply.com/116313" rel="noreferrer">BootPly</a>:</p>
  
  <p><strong>HTML of a single panel:</strong>(Rest is written in the link.. NOt relavent to my question)</p>
  
  <pre><code>&lt;div class="panel panel-primary" style="box-shadow: 5px 5px 2px #888888;"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;h3 class="panel-title"&gt;
                                      Vehicle Status Comparison &lt;span class="pull-right"&gt;&lt;i class="glyphicon glyphicon-fullscreen"
                                          data-toggle="tooltip" data-placement="left" title="Show Full Screen"&gt;&lt;/i&gt;&amp;nbsp;
                                          &lt;i class="glyphicon glyphicon-pushpin" data-toggle="tooltip" data-placement="left"
                                              title="Show options"&gt;&lt;/i&gt;&amp;nbsp; &lt;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."&gt;
                                              &lt;/i&gt;&amp;nbsp; &lt;i class=" glyphicon glyphicon-retweet" data-toggle="tooltip" data-placement="left"
                                                  title="Toggle Chart"&gt;&lt;/i&gt;&amp;nbsp; &lt;/span&gt;
                                  &lt;/h3&gt;
                              &lt;/div&gt;
                              &lt;div class="panel-body"&gt;
                                  &lt;div id="c_VehicleStatusFull"&gt;
                                  &lt;/div&gt;
                                  &lt;div class="overlay" style="display: none"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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;
   }
  </code></pre>
  
  <p>JS: </p>
  
  <p>The use of JS is to show and hide the ".overlay" div</p>
  
  <pre><code>$('.glyphicon-pushpin').click(function () {
       $('.overlay').toggle();
  });
  </code></pre>
  
  <p><strong>Note:</strong></p>
  
  <p>Please note that in the link I've given, I've hardcoded the <code>.panel-body</code> height to 100px but in actual it is adjusted at runtime.</p>
  
  <p>Problem:</p>
  
  <p>On cliking the "Show options" icon.. The overlay is spread all over the div but I want it to stay within 'div .panel-body'</p>
  
  <p><img src="https://i.stack.imgur.com/9vvzw.jpg" alt="Improper Overlay"></p>