Question

我有一个像以下

的引导小组

 <div class="panel">
   <div class="panel-body">
     <div id="panel-overlay"></div>
     ...
   </div>
 </div>


#panel-overlay {
    /* set it to fill the whil screen */
    width: 100%;
    height: 100%;
    /* transparency for different browsers */
    filter: alpha(opacity = 50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    background: #000;
    z-index: 3000;
    /* hide it by default */
    display: none;
}

function panelOverlay() {
    var panel = $('.panel');
    var maskHeight = panel.height();
    var maskWidth = panel.width();
    $('#panel-overlay').css({
        height : maskHeight,
        width : maskWidth
    }).show();
}

如何让叠加显示在面板上？

Answer 1

为了创建叠加层，该元素应从正常流中移除并相对于其父元素定位。

因此，您可以向覆盖元素提供position: absolute;声明，并向面板（容器）提供position: relative。

此处使用

relative定位来建立新的containing block。

例如：

#panel-overlay {
    /* set it to fill the whole panel */
    top: 0; right: 0; bottom: 0; left: 0;
    position: absolute;
}

.panel { position: relative; }

覆盖在引导板上

1 个答案: