覆蓋在引導面板

我有一個引導面板像下面覆蓋在引導面板

<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

覆蓋在引導面板

回答

相關問題