0

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

div {position: fixed;}

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

我什至尝试过使用z-indexbody 元素和水印 div 的属性。

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

那是行不通的。

我该如何解决这个问题，以便可以单击水印 div 下方的元素。

4

5 回答 5

2

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

第一个，是非标准的pointer-eventscss 属性：

pointer-events:none;

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


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


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

于 2012-12-17T06:57:15.373 回答
1

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

你可以做的是：

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

<div class="wrap">

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

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

于 2012-12-17T06:56:44.210 回答
1

在您的情况下，您提供的z-indexto body 将不起作用，因为 body 是其中所有其他元素的父级。

所以你可以做的是：

如果您的水印在体内，那么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;
}
于 2012-12-17T07:12:03.157 回答
0

尝试在 CSS 中为 z-index 使用更宽的数字

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}
于 2012-12-17T07:03:45.143 回答
-1

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

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

于 2012-12-17T06:49:00.053 回答