CODEWITHSUNDEEP
csstwitter-bootstrap
Saurabh Kumar
Saurabh Kumar

Reputation: 16661

overlay over bootstrap panel

I have a bootstrap panel like following 

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

how can i make the overlay appear over panel?

Upvotes: 2

Views: 4985

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

In order to create an overlay, the element should be removed from normal flow and get positioned relative to its parent.

Therefore, you could give position: absolute; declaration to the overlay element and position: relative to the panel (the container).

relative positioning is used here to establish a new containing block.

For instance:

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

.panel { position: relative; }

Upvotes: 3

Related Questions