CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapoverlay
boliwe
boliwe

Reputation: 233

CSS overlay by element as relative

I am using twitter bootstrap and I want to create an overlay to show loading overlay. For example a panel body or a well body will fill and center a text "loading" or image.

I created a jsfiddle application here.

<div class="col-md-5">
    <div class="panel panel-info">
        <div class="panel-heading">
            Header
        </div>
        <div class="panel-body">
            Body
            <div class="loading-overlay">Loading</div>
        </div>
    </div>    
</div>

<div class="well">
    Well Body
    <div class="loading-overlay">Loading</div>
</div>

.loading-overlay{
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    background-color:rgba(0, 0, 0, 0.65);
    color: white;
}

Bu overlay is filling all page. But I want it will fill only well element or panel body. or if I put it any other element.

sample code is here.

Upvotes: 1

Views: 1171

Answers (4)

snehatulsi
snehatulsi

Reputation: 247

Add class relative to parent container , to show loading overlay separate for each section.

.panel-body, .well{
    position:relative;
}

Here is the fiddle : http://jsfiddle.net/0r7ytrk1/5/

Upvotes: 0

dashtinejad
dashtinejad

Reputation: 6253

Make your parents relative:

.well, .panel-body {
    position: relative;
}

JSFiddle Demo.

Upvotes: 0

Seichleon
Seichleon

Reputation: 86

What you want to do here is set the container element to a relative position.

In this case, since both .panel-body and the .well are supposed to contain the overlay all you have to do is add the following rules:

.panel-body {
    position: relative;
}

.well {
    position: relative;
}

Here's the fiddle: http://jsfiddle.net/3er5qjgt/

Upvotes: 1

Cl&#233;ment Malet
Cl&#233;ment Malet

Reputation: 5090

That's because :

top:0;
left:0;
right:0;
bottom:0;
position:absolute;

Is transformed into : Take all the place possible on the page.

You could change the position to relative, or change the way you handle this.

Upvotes: 0

Related Questions