用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

回答

相关问题