I’m working on a website where I want to display a giant image slideshow in the background along with a quote and a link, which for technical purposes (EDIT: described in comment below) must reside in the same parent element. On top of all that I’m displaying my content, and at one point I want the background image to display through the content, which I have accomplished by setting a margin between two of my content elements (#header and #main). It’s a little hard the describe, but I hope this jsfiddle gives an idea of what I’m doing.
The problem is that link and quote displayed in the background is not clickable, since the click is instead directed at the element above displayed (#header). I know about pointer-events: none; but that’s no good since I need IE support and being able to interpret clicks in the #header element.
I guess this is in some way attributable to stacking context mentioned in this answer, but I just can’t get it right. I’m unable to get the desired layout without using a negative z-index on #background, while the links inside #background would probably need to be put in a parent of higher z-index. The reasonable thing would probably be to put it somewhere else in the markup, but as stated above the link is related to the rest of the content inside #background. Is it possible to make the links stacking context render “above” the stacking context of its parent element?
The code is a bit too long to do any good here, and not really that complex, so please refer to aforementioned jsfiddle.
Make the giant image a background of the
<body>and don’t create an element with a negativez-indexfor it. Then your link will be clickable – DEMO