用css覆蓋另一個div

作爲一名c＃開發人員，我發現很難用css類來準備一些網頁。對於所有對我來說都很裸露的專家而言，這可能太容易了。用css覆蓋另一個div

我有一個包裝器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; 
}

我使用jquery刪除display:none屬性。在應用這些課程時，它不會覆蓋整個頁面並且看起來扭曲。善意建議如何做到這一點。爲了更好的理解 enter image description here 我附上了截屏

來源

2013-02-12 ankur

試着把z-index和不透明度放在一起.. – 2013-02-12 11:11:46

@andy我想要的是將覆蓋層放在整個屏幕上，覆蓋層頂部的黃色圖像與右上角的十字按鈕黃色的屏幕。 – ankur 2013-02-12 11:16:51

可能重複[如何覆蓋一個div在另一個div]（http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div） – Typo 2015-05-07 15:32:29

這裏的另一個

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進行測試。

來源

2013-02-12 14:50:52

如果要覆蓋整個屏幕的包裝，你可以使用：

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

你z-index屬性將需要比它下面的元素更高您正在試圖掩蓋

來源

2013-02-12 11:16:31 Pete

我做出了改變你建議覆蓋覆蓋整個屏幕在Firefox中，但在IE中，它從單選按鈕框後的一半屏幕開始。我怎麼能在兩個瀏覽器中匹配行爲 – ankur 2013-02-12 11:21:43

沒有得到你你可以告訴我該怎麼做，我的意思是我必須在我的css類中做出什麼改變。黃色屏幕右上角的十字按鈕也會顯示覆蓋層頂部的黃色圖像。現在黃色圖像看起來透明...... – ankur 2013-02-12 11:25:44

這是因爲你已經讓你的'.dvVoteWrapper' div透明，所以它裏面的所有東西都是透明的（你可以把它移到你的主體標籤中），如果你想一個透明的背景顏色看看這篇文章http://stackoverflow.com/questions/14830186/how-to-add-opacity-on-background/14830270#14830270 – Pete 2013-02-12 11:28:14

用css覆蓋另一個div

回答

相關問題