Question

I have div as watermark on page.

div {position: fixed;}

But in the area which is covered by div, the buttons and links below the DIVs are become un-clickable. To click the element, scroll and move the DIV.

I have even tried with z-index property of body element and watermark div.

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

that does’t work.

how can i solve this issue, So that element which comes below the watermark div can be clicked.

Answer 1

This seems like a poor way to protect the intellectual property. Even with plain old chrome, you can directly modify/remove the elements. That said, there are two approaches I know of.

Number one, is the non-standard pointer-events css property:

pointer-events:none;

This will allow all clicks to pass through the object. CAUTION: it is non-standard. See the compatibility chart at the bottom of the MDN link.

The other method of course is z-index. If you just want a watermark on the page, you can use z-index, but it won’t cover the buttons/links that should be interactive. The catch is that z-index requires another attribute to work: position. If the element already has a position attribute, leave as is. Otherwise, give it position:relative so that it stays in the document flow (absolute and fixed take it out of flow). Lastly, the tree level of the z-indexed element is also important. Make sure the watermark is closer to the root element.

In conclusion, I think it’s a bad idea. HTML/CSS was not designed for this, but if you feel adventurous, give it a shot.