CODEWITHSUNDEEP
jqueryhtmlcss
Poonam Bhatt
Poonam Bhatt

Reputation: 10322

div in background layer

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.

Upvotes: 0

Views: 673

Answers (5)

Jai
Jai

Reputation: 74738

In your case you are giving the z-index to body which won't work because body is the parent of all other elements in it.

so what you can do is:

if your watermark is in the body then z-index:1

and

if you have wrapper div then its z-index:2 but wrapper div needs "position:relative";

i tried something here: http://jsfiddle.net/VJN8F/

used css is this:

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

Upvotes: 1

Dev
Dev

Reputation: 857

try with wider numbers for z-index in CSS

body{
    z-index:1000;
    }

watermark{
    z-index:-1000;
}

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78550

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.

Upvotes: 2

Rakesh Menon
Rakesh Menon

Reputation: 166

z-index works perfectly - but in your case it wont because here the div is a child of the body.

what you can do is:

put all your contents in a wrapper div, something like:

<div class="wrap">

and then add the watermark as sibling to this div (same level)

Now assign z-index to both these divs [watermark: 1 and #wrap: 2]

Upvotes: 1

rai.skumar
rai.skumar

Reputation: 10677

I will suggest you try more wider numbers like 0 or -999 for bottom-most div and 999 for top most div.

I have noticed that browsers sometime don't reflect it properly if you give very small numbers like 1 and 2. This is just based on my personal experience. So i prefer to give more wider numbers.

Upvotes: -1

Related Questions