How can I draw a layer in front, but make it a choice in the back?

Question

Think of Google Chrome's “Inspect Element”. When the user translates the line into the Developer Tools, the item is "highlighted" on the screen. I am trying to reproduce the same functionality, except that an item can be highlighted when the user translates that item, rather than from a list.

My problem is this: when I select an element (creating a div with a translucent background color with the same dimensions as the original element and located in the same place as the original element), the div should be colored higher than this element (for of being visible). However, in some cases, when there are auxiliary elements that need to be selected, the div "highlight" is on top, not allowing them to be selected.

Some elements will have background images or colors, which will prevent the appearance of backlight. In addition, the markup can contain any number of elements with variable z-index values. I will update my question to reflect these limitations.

I look for any job offers or alternatives if this is not possible.

Here's a fiddle to show what I mean.

Thanks in advance!

Answer 1

You can use CSS3 pointer-events:none; : http://jsfiddle.net/Shmiddty/BU27J/9/

Alternatively, you can use z-index:-1; but if your "selected" elements have their own background, you will not see the selection of the div.

Answer 2

You need to set the zIndex of the selection element:

 div.style.width = this.offsetWidth + 'px'; div.style.height = this.offsetHeight + 'px'; div.style.zIndex = -1; // this puts it behind everything 

Here is your updated jsFiddle

Or, if it breaks with the background, you can use:

 div.style.pointerEvents = 'none';