用css覆盖另一个div

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

我有一个具有一些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>

我的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属性。 在应用这些课程时，它不会覆盖整个页面并且看起来扭曲。 善意建议如何做到这一点。 为了更好的理解 我附上了屏幕截图

---

这是另一个

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进行测试。

---

如果你想让包装器覆盖整个屏幕，你可以使用：

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

你的z-index属性将需要比你试图覆盖的任何下面的元素更高

链接地址: http://www.djcxy.com/p/75859.html

上一篇: overlay a div over another one with css

下一篇: Overlaying one div over another, but not knowing the size of the div