Question

我在页面上有div作为水印。

div {position: fixed;}

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

我甚至尝试使用body元素和水印div的z-index属性。

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

不起作用。

如何解决这个问题，可以点击水印div下面的元素。

Answer 1

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

第一，是非标准pointer-events css属性：

pointer-events:none;

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

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

总之，我认为这是一个坏主意。 HTML / CSS不是为此而设计的，但是如果你喜欢冒险，那就试试吧。

Answer 2

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

你能做的是：

将所有内容放入包装div中，例如：

<div class="wrap">

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

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

Answer 3

在你的情况下，你将z-index给予身体不起作用，因为身体是其中所有其他元素的父亲。

所以你可以做的是：

如果你的水印在身体中，那么z-index:1

和

如果您有wrapper div，那么z-index:2但wrapper div needs "position:relative";

我在这里试了一下： http://jsfiddle.net/VJN8F/

用过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;
}

Answer 4

尝试使用更广泛的CSS中的z-index数字

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}

Answer 5

我建议您尝试更广泛的数字，例如0或-999用于最底部的div，999用于最高的div 。

我注意到，如果您提供的数字非常小，例如1和2，浏览器有时候无法正确反映。这只是基于我的个人经验。所以我更愿意提供更多的数字。

背景层中的div

5 个答案: