overlay a div over another one with css

Question

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.

<div class="dvLanding">
 <div class="popupArea">
            <span class="VoteOnce">You can only vote once.</span> <a style="vertical-align: top">
                <img alt="close" src="../../Images/error1-exit-button.png" /></a></div></div>
    </div>

my css classes.

.dvVoteWrapper
{
    background-color: #949494;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    display:none;
    width: 1024px;
    height: 768px;
    position: absolute;
}

.popupArea
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.dvLanding
{
    background-image: url(/Images/screen1-bg-logos.jpg);
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
   .VoteOnce
{
    font-family: Calibri regular;
    font-size: 24pt;
    background-image: url(/Images/error1-vote-once-bg.png);
    background-repeat: no-repeat;
    width:288px;
    height:74px;
    color: #000000;
}

i am removing the display:none attribute with jquery. When applying this classes it is not covering the full page and looking distorted. kindly suggest how to do this. for better understanding i have attached the screen shots

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