наложение div над другим с помощью css

Question

Являясь разработчиком C#, мне сложно найти классы css для подготовки некоторых веб-страниц. Это может быть слишком легко для всех экспертов, так голых со мной.

У меня есть обертка div, которая имеет некоторый набор свойств css. при нажатии кнопки мне приходится показывать чрезмерно с некоторым сообщением.

<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> 

мои классы css.

.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; 
} 

Я удаляю атрибут display:none с jquery. При применении этих классов он не покрывает всю страницу и выглядит искаженным. любезно предложите, как это сделать. для лучшего понимания я приложил скриншоты

Answer 1

Вот еще один

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 для тестирования.

Answer 2

Если вы хотите обертку, чтобы покрыть весь экран, который вы можете использовать:

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

Ваш z-index собственности должны быть выше, чем любой из элементов под ним что вы пытаетесь покрыть