绝对叠加<div>不覆盖相对定位的元素 [英] Absolute overlay <div> doesn't cover relatively positioned elements
问题描述
我正在使用绝对定位的 div 来覆盖/屏蔽另一个组件，它运行良好，除非其中一个组件是使用某些显示样式(例如相对)的元素.在这种情况下，元素(如图像按钮)不会被屏蔽并且仍然可以与之交互，这是我试图避免的.这个快速示例代码演示了这个问题.有没有一种简单的方法可以确保掩码"div 覆盖所有内容，而不管它的位置如何?我尝试使用 Z-index，但它似乎不适用于这种情况.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head><title>示例</title></head><身体><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>测试<br/><input type="image" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" style="position:relative; top:25px;"/></html>
这是什么浏览器中的问题?我会先尝试使用这个 CSS，然后在 IE 和 FF 中比较结果
div {位置:相对；z-索引:1；高度:200px；宽度:400px；背景颜色:绿色；}div div {位置:绝对；z-索引:2；顶部:0px;底部:0px;左:0px;右:0px;背景颜色:黑色；不透明度:0.5；}div div 输入 {位置:相对；顶部:25px；z-索引:1；}I'm using an absolutely positioned div to cover/mask another component and it works well except when one of those components is an element using certain display styles, like relative. When that's the case, the element (like an image button) is not masked and can still be interacted with, which is what I'm trying to avoid. This quick example code demonstrates the issue. Is there an easy way to make sure the "mask" div covers everything regardless of how it's positioned? I tried playing with Z-index but it doesn't seem to apply in this scenario.
<!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>
What browser id this an issue in? I would try using this CSS first and then compare results in IE and 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;
}
这篇关于绝对叠加<div>不覆盖相对定位的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
