[Solved] Z-index display with access beneath? - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
August 20, 2015 at 6:45 pm #206807

MojoBob
Participant

I have a css display/positioning puzzle:

Is it possible to position an image so that it rests on top of other elements (z-index) but is treated as invisible for the purposes of mousing about underneath?

In other words, is there an attribute I can set so that it doesn’t prevent access to control elements (like links, buttons etc.) on lower layers?

August 20, 2015 at 7:13 pm #206808

shaneisme
Participant

If you cover things with anything, including an image, using z-index, the stuff beneath it won’t be available to click on.

But there might be another way of going about what you’re trying to accomplish. Do you have a comp or image that we can look at to see what effect you’re going for?

August 20, 2015 at 7:25 pm #206809

MojoBob
Participant

No, I don’t have a specific project in mind. It’s just something that occasionally trips me up when I think I’ve been clever, and I was hoping it was just my ignorance of some super-secret setting that only the Illuminati know.

August 20, 2015 at 7:27 pm #206810

shaneisme
Participant

Not that I know of, but there are plenty of ways to skin a cat when we’re building this stuff. So the effect might be possible.

Heck you could change the z-index on hover and the opacity of the stuff “below” to give a similar visual cue.

Johnny 5 need more input basically.

August 20, 2015 at 9:40 pm #206814
Shikkediel
Participant
is there an attribute I can set so that it doesn’t prevent access to control elements on lower layers?

I do believe there is such a thing :
```
#topelement {
pointer-events: none;
}
```
August 20, 2015 at 10:12 pm #206816

MojoBob
Participant

That seems to do the trick — thanks very much. That’ll come in very handy :)

August 20, 2015 at 10:20 pm #206818

Shikkediel
Participant

No problem, keep in mind support is pretty good but IE has only recently implemented it :

caniuse.com/pointer-events

You might wanna consider a JS fallback for earlier versions.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘CSS’ is closed to new topics and replies.