CODEWITHSUNDEEP
css
lukehillonline
lukehillonline

Reputation: 2647

Links not clickable behind fixed position div using css clip

I am using fixed positions elements along side the css property clip to make a cool scrolling / paging effect.

This all works great but my issue is that I cannot click my links.

I can see that the fixed elements are overlaying each other which is causing the issue but I cannot figure out how to fix it.

I have tried changing z-index values on the containers and the anchor tag with no luck.

Here is a fiddle: http://jsfiddle.net/9ukyrbc0/

If anyone can help that would be amazing!

Cheers!

Upvotes: 0

Views: 4223

Answers (4)

Venkatesh A
Venkatesh A

Reputation: 2504

For me it was a floating action button with poistion-fixed bootstrap class added that did not work. It worked by just adding z-index:1 to its styles.

Upvotes: 0

Edgar Ramos
Edgar Ramos

Reputation: 1

I was having the same issue, the code given here without the pointer-events: none; worked for me. The only issue is that I also had links in my fixed position element and now those links don't work.

Upvotes: 0

lukehillonline
lukehillonline

Reputation: 2647

So I have figured it out, but I cannot really explain it.

The first thing to do is to remove pointer-events: none so thanks to @manhatmanich for spotting that one.

This makes the first link clickable but not the rest, it looks like a z-index issue but changing the z-index values does not work.

So while playing around I tried removing the position absolute from the anchor tag and BOOM, all links clickable.

You can see a fiddle here: http://jsfiddle.net/9ukyrbc0/10/

I honestly don't understand how this fixes the problem but it does!

Upvotes: 0

mahatmanich
mahatmanich

Reputation: 11033

The problem is within .fixed-container:

.fixed-container {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none; <-----
}



pointer-events: none;

Pointer Events are not triggered at all within that container ... thus links are not active.

more on this here ... https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Upvotes: 7

Related Questions