0

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.

Community
  • 1
  • 1
Simon
  • 3,667
  • 1
  • 35
  • 49
  • 1
    Could you describe the "technical purposes" that are limiting you to keeping the quote and link in the same parent element as the background image? It seems like if they could be overcome, stacking the quote and link (or, at the least, the link) would resolve this challenge. – hall.stephenk Nov 28 '12 at 17:13
  • The limitations is that the current implementation uses a slideshow plugin which keeps the image and caption nested within a single element. You are right that the problem could be solved by placing the quote elsewhere, but I'd prefer a CSS solution if possible. – Simon Nov 28 '12 at 20:25

1 Answers1

1

Make the giant image a background of the <body> and don't create an element with a negative z-index for it. Then your link will be clickable - DEMO

Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • Thanks for your answer! I'm sorry, I probably should have mentioned that my "giant image" is a bit more complex than that. Namely it being a series of image/caption pairs stepped through using CSS transitions, which I guess rules out setting the image as background on body. Otherwise a good solution! – Simon Nov 28 '12 at 20:30