我试图创建自己的,莫代尔,对话框使用的div:为什么我的覆盖层覆盖了一些元素,但不是全部?
html:
<div id="overlay"> </div>
<div id="popup">
<input type="submit"/>
<p>Some text</p>
</div>
css:
#overlay{
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-color:#000;
opacity: .75;
z-index: -1;
}
#popup {
position: absolute;
text-align:center;
z-index: 1000;
}
http://jsfiddle.net/wfsaxton/fq7mhefa/
我不知道为什么,但我的叠加不仅覆盖了网页,而且还覆盖弹出部分(背景和文本)。我只希望它能够在背景中隐藏页面......弹出窗口应该完全位于叠加层之上。
任何想法可能会发生什么?
因为它具有较高的z-index? - http://jsfiddle.net/fq7mhefa/3/ –
尝试z-index:999覆盖。 –
popup具有比叠加更高的z-index。因此,我会假设弹出窗口会出现在叠加层上方。只有某些标签(如输入)位于叠加层上方。其余部分(如文本和背景)位于叠加层下方。 – wsaxton