覆盖在引导面板

我有一个引导面板像下面覆盖在引导面板

<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(); 
}

我怎样才能使覆盖在显示面板？

来源

2014-09-04 Saurabh Kumar

它需要某种定位的设置利用的z-index。你有没有尝试将它设置为'position：relative;' – Evan 2014-09-04 21:15:05

是的，但是它没有在上面显示..besides它取代了所有的东西.. – 2014-09-04 21:17:04

给面板一个'position：relative'和一个'position：absolute'给overlay 。 – 2014-09-04 21:17:13

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

因此，您可以将position: absolute;声明给面板（容器）的overlay元素和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; }

来源

2014-09-04 21:25:41

谢谢你的答案！星期一早上的巨大帮助。 – 2015-02-02 14:05:05

覆盖在引导面板

回答

相关问题