Overlay A Div Over Another One With Css

I have a wrapper div that has some css property set. on click of a button i have to show an overly with some message.

Solution 1:

Here's another one

HTML:

<div class="dvLanding">
    <div class="dvVolunter"></div>
    <div class="dvVote">
        <br />
        <br />
    </div>
    <div class="dvVoteWrapper"></div>
</div>
<div class="popupArea">
    <span class="VoteOnce">You can only vote once.
        <a class="closeButton">
            <img alt="close" src="../../Images/error1-exit-button.png" />
        </a>
    </span> 
</div>

CSS:

.dvLanding {
    background-image: url(http://lorempixel.com/800/600);
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}
.popupArea {
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -180px;
}
.closeButton {
    vertical-align: top;
    font-size: 10pt;
}
.VoteOnce {
    font-family: Calibri regular;
    font-size: 24pt;
}

JSFiddle for testing.

Solution 2:

If you want the wrapper to cover the whole screen you can use:

position:fixed; left:0; top:0; z-index:100; width:100%; height:100%;

Your z-index property will need to be higher than any of the elements below it that you are trying to cover

Share