Question

我正在使用一个绝对定位的div来覆盖/屏蔽另一个组件，除非其中一个组件是使用某些显示样式的元素（如相对），否则它很有效。在这种情况下，元素（如图像按钮）不会被屏蔽，仍然可以与之交互，这正是我想要避免的。此快速示例代码演示了此问题。是否有一种简单的方法可以确保“掩码”div覆盖所有内容，无论它的位置如何？我尝试使用Z-index，但它似乎不适用于这种情况。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head><title>Example</title></head>
    <body>
        <div style="height:200px; width:400px; background-color:green;">
            <div style="position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:black; opacity:0.5;"></div>
            Test<br />
            <input type="image" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="position:relative; top:25px;" />
        </div>
    </body>
</html>

Answer 1

这个问题是什么浏览器ID？我会先尝试使用这个CSS然后比较IE和FF中的结果

div {
position:relative;
z-index:1;
height:200px;
width:400px; 
background-color:green;
}

div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}

div div input {
position:relative;
top:25px;
z-index:1;
}

Answer 2

看这个Fiddle

注意：

设置相对于包装器div的位置
设置叠加宽度，高度
为元素设置z-index（您要使用 z-index ，需要定义位置）

Answer 3

有一个有用的resource来解决这个问题。

长话短说，如果绝对放置的div（.abs）是空的，IE不喜欢将它放在其他元素的前面而不管z-index。您可以使用1x1透明gif来克服这个问题，例如。通过向div添加以下样式：

   background: transparent url('/images/clear.gif') repeat 0 0;

我发现这有帮助。这很棒，因为只需要很少额外的样式，你不必像其他答案那样明确管理z-indices。

注意：您可能需要将绝对放置的div移动到父容器中的最后一个元素。

绝对叠加<div>不包括相对定位的元素</div>

3 个答案: