Make element unclickable (click things behind it)

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren't there "blocking" the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

CSS Pointer Events is what you want to look at. In your case, set pointer-events to "none". Look at this JSFiddle for an example... http://jsfiddle.net/dppJw/1/

Notice that double clicking on the icon will still say you click the paragraph.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
} 

If you want to use JavaScript :

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>