Html 用css将一个div覆盖在另一个div上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14831152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overlay a div over another one with css
提问by ankur
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.
我有一个包含一些 css 属性集的包装 div。单击一个按钮，我必须显示一些消息。
<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.
我的 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;
}
i am removing the display:noneattribute 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
我正在display:none使用 jquery删除该属性。应用此类时，它没有覆盖整页并且看起来失真。请建议如何做到这一点。为了更好地理解，我附上了屏幕截图
采纳答案by Olaf Dietsche
Here's another one
这是另一个
HTML:
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:
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;
}
JSFiddlefor testing.
用于测试的JSFiddle。
回答by Pete
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-indexproperty will need to be higher than any of the elements below it that you are trying to cover
您的z-index财产将需要高于您试图覆盖的任何其下方的元素
