Absolutely positioned div over selectable text / links

Question

I have a div that is positioned over a large chunk of the page, this causes the content underneath the div to no longer be selectable / clickable.

Is there a way to remedy this? ie: make a div not have any clickable functionality to it?

#page {
    width: 980px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
}
#overlay {
    margin: 0px;
    padding: 0px;
    height: 536px;
    width: 422px;
    position: absolute;
    top: -4px;
    right: -20px;
    background-image: url(../images/overlay_full.png);
    background-repeat: no-repeat;
    background-position: left top;
}

It is possible, I'm going to write an answer in some minutes when I can. — thirtydot, Jan 19 '11 at 19:36
The technique I'm thinking of requires javascript, is that acceptable? — thirtydot, Jan 20 '11 at 01:08
I wanted to do this, but I thought "surely this is impossible but I'll at least Google it...". Glad I was wrong! — Kip, Sep 01 '17 at 01:36

score 17 · Answer 1 · edited May 23 '17 at 12:24

17

use css attribute "pointer-events" on the overlay:

#overlay {
   pointer-events: none;
}

see: HTML “overlay” which allows clicks to fall through to elements behind it

edited May 23 '17 at 12:24

Community

1
1

answered Apr 15 '12 at 19:10

Stephan Hepper

420
4
6

As the comments on the linked version mention, this is a really nice solution, but you have to be careful since it's not supported by all browsers. – dhoelzgen Apr 16 '12 at 15:39
Awesome! Super clean solution! – Erik Öjebo Jan 01 '14 at 09:38

score 1 · Accepted Answer · answered Jan 19 '11 at 19:32

1

If you really want the div to overlay the (clickable) stuff below, there is no decent way. An undecent way could be to hide the element on mousedown and reshow it onmouseup:

document.body.addEventListener("mousedown", function() { getElementById("overlay").style = "display:none;" });
document.body.addEventListener("mouseup", function() { getElementById("overlay").style = "display:block;" });

However be warned this is causing a reflow with every mousedown so will hit performance.

answered Jan 19 '11 at 19:32

cellcortex

3,166
1
24
34

this prevents things like the mouse cursor changing to a hand when hovering over links, and prevents links from being underlined when hovered. The `pointer-events` answer is the right answer, as long as you don't need to support anything older than IE11. – Kip Sep 01 '17 at 01:30

score 0 · Answer 3 · answered Jan 19 '11 at 19:20

0

You can use css z-index property to make the clickable objects overlap this mask. See how it works here:

http://www.w3schools.com/css/pr_pos_z-index.asp

answered Jan 19 '11 at 19:20

amosrivera

26,114
9
67
76

But doesn't this defeat the purpose of positioning the thing on top? – sdleihssirhc Jan 19 '11 at 19:27
Yeah I pretty much would need all the content to do this which would then hide the div completely – kilrizzy Jan 19 '11 at 19:28
depends.. you can add z-index to links for instance and those you want to be on top, maybe you can post the relevant html to get a better idea – amosrivera Jan 19 '11 at 19:37

score 0 · Answer 4 · answered Jul 16 '11 at 03:21

There is/was a cheat method to do this were you put the overlay in a container div, set to:

position:fixed;
overflow:display;
width:0px;
height:0px;

Which subsequently causes it to have no hit area, but still be visible. However I don't know if this is cross-browser safe and may in fact be the result of a bug.

Absolutely positioned div over selectable text / links

4 Answers4