CODEWITHSUNDEEP
htmlgoogle-chromecss
shan
shan

Reputation: 3145

Issues with pointer-events and z-index

I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:

here's my jsfiddle of my issue

it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:

.bottomdivtransparent {
    pointer-events: none;
    width: 100%;
    top: 0px;
    height: 300px;
    left: 0;
    overflow: hidden;
    opacity: 0;
}

Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..

Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?

Thank you!

edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..

Upvotes: 2

Views: 3191

Answers (1)

Kasyx
Kasyx

Reputation: 3200

As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/

.bottomdiv {
    //(...)
    margin-bottom: 310px;
    //(...)
}

(Thank you @Andrea Ligios for improving this answer)

Upvotes: 2

Related Questions