用css覆盖另一个div [英] overlay a div over another one with css

问题描述

作为一名c＃开发人员，我发现很难用css类来准备一些网页。对于所有那些对我来说很裸露的专家来说，这可能太容易了。

我有一个包含一些css属性的包装div。点击一个按钮我必须显示一个过度的消息。

 < div class =dvLanding> 
< div class =popupArea> 
< span class =VoteOnce>您只能投一次。< / span> < a style =vertical-align：top> 
< img alt =closesrc =../../ Images / error1-exit-button.png/>< / a>< / div>< / div> 
< / div> 
  

我的css类。

  .dvVoteWrapper 
 {
 background-color：＃949494; 
不透明度：0.5; 
 filter：Alpha（opacity = 50）; 
 display：none; 
 width：1024px; 
 height：768px; 
位置：绝对; 
} 
 
 .popupArea 
 {
 width：100％; 
身高：100％; 
位置：绝对; 
 top：0; 
剩下：0; 
} 
 
 .dvLanding 
 {
 background-image：url（/Images/screen1-bg-logos.jpg）; 
背景重复：不重复; 
位置：绝对; 
宽度：100％; 
身高：100％; 
} 
 .VoteOnce 
 {
 font-family：Calibri regular; 
 font-size：24pt; 
 background-image：url（/Images/error1-vote-once-bg.png）; 
背景重复：不重复; 
 width：288px; 
 height：74px; 
颜色：＃000000; 
} 
  

我正在移除 display：none 属性与jquery。在应用这些课程时，它不会覆盖整个页面并且看起来扭曲。善意建议如何做到这一点。为了更好的理解

解决方案

这是另一个

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>您只能投一次。 
< a class =closeButton> 
 < / a> 
< / span> 
< / div> 
  

CSS：

  .dvLanding {
 background-image：url（http://lorempixel.com/800/600）; 
位置：绝对; 
宽度：100％; 
身高：100％; 
不透明度：0.5; 
} 
 .popupArea {
 background-color：yellow; 
位置：绝对; 
 top：50％; 
剩下：50％; 
 margin-top：-30px; 
 margin-left：-180px; 
} 
 .closeButton {
 vertical-align：top; 
 font-size：10pt; 
} 
 .VoteOnce {
 font-family：Calibri regular; 
 font-size：24pt; 
} 
  

JSFiddle 进行测试。

Being a c# developer I am a finding hard to play with css classes to prepare some web pages. It may be too easy for all the experts so bare with me.

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 i have attached the screen shots

解决方案

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.

这篇关于用css覆盖另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！