Bootstrap 3：在面板主体上创建叠加层答案

【问题标题】：Bootstrap 3: Create an overlay on panel-bodyBootstrap 3：在面板主体上创建叠加层
【发布时间】：2014-03-26 02:44:16
【问题描述】：

我想在面板上显示一些我需要覆盖的信息，这些信息应该显示在用户引发的事件上。

我在BootPly 上创建了一个演示：

单个面板的 HTML：（其余部分写在链接中。与我的问题无关）

<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：

JS的用途是显示和隐藏“.overlay” div

$('.glyphicon-pushpin').click(function () {
     $('.overlay').toggle();
});

注意：

请注意，在我提供的链接中，我已将 .panel-body 高度硬编码为 100 像素，但实际上它是在运行时调整的。

问题：

点击“显示选项”图标.. 覆盖层遍布整个 div，但我希望它保持在 'div .panel-body' 内

【问题讨论】：

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

请试试这个css

.panel-body { height:100px; position:relative; }

【讨论】：