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:

<divclass="dvLanding"><divclass="dvVolunter"></div><divclass="dvVote"><br /><br /></div><divclass="dvVoteWrapper"></div></div><divclass="popupArea"><spanclass="VoteOnce">You can only vote once.
        <aclass="closeButton"><imgalt="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