CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
narzero
narzero

Reputation: 2299

How to overlap two divs with transparency

I have two div's that I want to overlap. Div A contains a Google Map and div B is a loading indicator I want to show when some changes are made and the map reloads.

What I want to accomplish is this:

AB

What I currently get is this (div B not showing at all):

A

Here's the code I'm using:

<div class="col-md-8 col-sm-8 full-height no-padding">
    <div class="full-height" style="position: relative">
        <div id="B" class="full-height" style="background-color: blue; opacity: 0.5; position: absolute; top: 0px; left: 0px; z-index: 99;"></div>
        <div id="A" class="full-height"></div>
    </div>
</div>

I've tried a few other things such as this and this but they don't seem to be working, maybe because I'm using Bootstrap and height: 100%;. What am I doing wrong?

Upvotes: 1

Views: 694

Answers (1)

itacode
itacode

Reputation: 3787

Please try to give width: 100% to the div with id="B"

Upvotes: 1

Related Questions