gpt4 book ai didi

html - 绝对覆盖
不覆盖相对定位的元素

转载 作者:太空宇宙 更新时间:2023-11-03 19:18:47 25 4
gpt4 key购买 nike

我正在使用一个绝对定位的 div 来覆盖/遮盖另一个组件,它运行良好,除非这些组件之一是使用特定显示样式(如相对)的元素。在这种情况下,元素(如图像按钮)不会被屏蔽并且仍然可以与之交互,这是我试图避免的。这个快速示例代码演示了这个问题。有没有一种简单的方法可以确保“ mask ”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>

最佳答案

看这个Fiddle

注意:

  • 设置相对于包装器 div 的位置

  • 设置覆盖宽度、高度大小

  • 为元素设置z-index(要使用z-index的地方,需要定义position)

关于html - 绝对覆盖 <div> 不覆盖相对定位的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5191254/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com