Jquery 背景层中的div

我在第页上有div作为水印

div {position: fixed;}

但是在div覆盖的区域中，div下面的按钮和链接变得不可点击。要单击元素，请滚动并移动DIV

我甚至尝试了body元素和watermark div的

z-index

属性

body z-index to 2
watermark z-index to 1

那不行

---

如何解决此问题，以便可以单击水印div下面的元素。

我建议您尝试使用更宽的数字，如0或-999表示最底部的div，999表示最顶部的div

---

我注意到，如果你给出非常小的数字，比如1和2，浏览器有时不能正确地反映它。这只是基于我个人的经验。因此，我更愿意给出更宽的数字。

我建议您尝试使用更宽的数字，如0或-999表示最底部的div，999表示最顶部的div

---

我注意到，如果你给出非常小的数字，比如1和2，浏览器有时不能正确地反映它。这只是基于我个人的经验。所以我更愿意给出更广泛的数字。

z-index工作得很好——但在你的例子中，它不会，因为这里的div是身体的孩子

您可以做的是：

将所有内容放入包装器div中，类似于：

<div class="wrap">

然后将水印作为同级添加到此div（相同级别）

---

现在，将z-index分配给这两个div[watermark:1和#wrap:2]

z-index工作得很好-但在您的情况下，它不会工作，因为这里div是身体的子体

您可以做的是：

将所有内容放入包装器div中，类似于：

<div class="wrap">

然后将水印作为同级添加到此div（相同级别）

---

现在将z-index分配给这两个div[watermark:1和#wrap:2]

这似乎是一种保护知识产权的糟糕方法。即使使用普通的旧chrome，也可以直接修改/删除元素。也就是说，我知道有两种方法

第一，是非标准css属性：

pointer-events:none;

这将允许所有单击通过对象。注意：这是非标准的。请参阅MDN链接底部的兼容性图表。


当然，另一种方法是

z-index

。如果您只想在页面上添加水印，可以使用

z-index

，但它不会覆盖应该是交互式的按钮/链接。问题是z-index需要另一个属性才能工作：

position

。如果元素已经有position属性，则保持原样。否则，为其指定

位置：相对
，使其保持在文档流中（
绝对
和
固定
将其移出流）。最后，z索引元素的树级别也很重要。确保水印更靠近根元素



总之，我认为这是个坏主意。HTML/CSS并不是为此而设计的，但如果你觉得有冒险精神，不妨尝试一下。
这似乎是一种保护知识产权的糟糕方法。即使使用普通的旧chrome，也可以直接修改/删除元素。也就是说，我知道有两种方法

第一，是非标准css属性：

pointer-events:none;

这将允许所有单击通过对象。注意：这是非标准的。请参阅MDN链接底部的兼容性图表。




当然，另一种方法是
z-index
。如果您只想在页面上添加水印，可以使用
z-index
，但它不会覆盖应该是交互式的按钮/链接。问题是z-index需要另一个属性才能工作：
position
。如果元素已经有position属性，则保持原样。否则，为其指定
位置：相对
，使其保持在文档流中（
绝对
和
固定
将其移出流）。最后，z索引元素的树级别也很重要。确保水印更靠近根元素



总之，我认为这是个坏主意。HTML/CSS并不是为此而设计的，但如果你觉得有冒险精神，不妨试一试。
尝试在CSS中使用更宽的z-index数字

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}

尝试在CSS中使用更宽的z索引数字

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}

在您的例子中，您将
z-index
赋给body，因为body是body中所有其他元素的父元素，所以它不起作用

因此，您可以做的是：

如果水印在正文中，则
z-index:1

及

如果您有
wrapper div
，那么它的
z-index:2
但是
wrapper div需要“位置：相对”

我在这里尝试了一些东西：

使用的css如下所示：

p{
  position:relative;
  z-index:2;
 }
div{
  position:fixed;
  bottom:0;
  right:0;
  z-index:1;
  width:200px;
  height:50px;
  border:solid 1px red;
  background:grey;
  opacity:0.5;
}

在您的例子中，您将
z-index
赋给body，因为body是body中所有其他元素的父元素，所以它不起作用

因此，您可以做的是：

如果水印在正文中，则
z-index:1

及

如果您有
wrapper div
，那么它的
z-index:2
但是
wrapper div需要“位置：相对”

我在这里尝试了一些东西：

使用的css如下所示：

p{
  position:relative;
  z-index:2;
 }
div{
  position:fixed;
  bottom:0;
  right:0;
  z-index:1;
  width:200px;
  height:50px;
  border:solid 1px red;
  background:grey;
  opacity:0.5;
}

在这种情况下，我有一个只点击不可见的div，在所有的东西上面。你能试着用背景图像来代替吗？试着把
位置：相对
添加到
主体
@Jan Dvorak:带相对位置，当我们滚动页面时，div会移动吗？@PoonamBhatt问题是
z-index
只适用于定位元素。在这种情况下，我在所有元素上方都有一个单击不可见的div，你可以尝试使用背景图像吗？尝试将
位置：相对
添加到
主体
@Jan Dvorak:with relative position，当我们滚动页面时div会移动吗？@PoonamBhatt问题是
z-index
只适用于定位元素。“如果你给出非常小的数字，比如1和2，浏览器就不能正确地反映它。”你能给我看一下你的源代码或示例吗？我可能应该使用w