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 enter image description here i have attached the screen shots

@andy what i want is to place the overlay on the complete screen and the yellow image on top of the overlay with the cross button on the top right hand side of the yellow screen. — ankur, Feb 12 '13 at 11:16
possible duplicate of [How to overlay one div over another div](http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) — Typo, May 07 '15 at 15:32

score 2 · Accepted Answer · answered Feb 12 '13 at 14:50

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.

score 1 · Answer 2 · answered Feb 12 '13 at 11:16

1

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

answered Feb 12 '13 at 11:16

Pete

57,112
28
117
166

i made the changes what you suggested the overlay covered the whole screen in firefox but in IE it begin from half of the screen after the radio button box. how can i match the behavior in both the browsers – ankur Feb 12 '13 at 11:21
did not get you can you tell me how to do that, I mean what changes i have to make in my css class. also that the yellow image on top of the overlay with the cross button on the top right hand side of the yellow screen. right now the yellow image is looking transparnet.... – ankur Feb 12 '13 at 11:25
It's because you've made your `.dvVoteWrapper` div transparent so everything in it will be transparent (are you able to move this into your main body tag), if you want a transparent background colour have a look at this post http://stackoverflow.com/questions/14830186/how-to-add-opacity-on-background/14830270#14830270 – Pete Feb 12 '13 at 11:28
ok so I have taken the small yellow part out of the wrapper , and increased the z-index to be the highest in among all elements. So in FF it is looking perfect . But in IE it is sill giving me problem. – ankur Feb 12 '13 at 11:33
I meant move the wrapper into the – Pete Feb 12 '13 at 11:34
You can only vote once.

i am not getting you this is my page html can you suggest
– ankur Feb 12 '13 at 11:40
which ever div you have added the position fixed style to needs to be a direct descendant of the body tag – Pete Feb 12 '13 at 11:41

overlay a div over another one with css

2 Answers2

Linked