Instead of Lightbox being on top of everything, make it relative and push everything down

Question

Rather than putting exact code down, i wish to ask a conceptual html/css/js question. Normally a lightbox works by being placed on top of everything on the page using a z-index. What if you didnt want the lightbox on top of everything else? But instead push the footer down to make room for the new content. My gut feeling tells me that if you create the same z-index, and make the positioning relative, it should push all the other div's down. However this is not quite working.

I am trying to achieve the following: The user clicks a thumbnail, which pushes the footer down and opens a new div on the centre of the page with some content. If they decide to press an 'X', it closes the div, return back to the original thumbnail, moving the footer back up the page.

I thought using a lightbox, and modifying the code would be the quickest and easiest way. However i might be going about this all wrong. Any thoughts?

Thank You.

Answer 1

z-index is used only for elements that are stacked on top of each other. This doesn't seem to be the case for what you're trying to achieve.

You need to place the lightbox between the footer and content and set it to be hidden initially and whenever user clicks on the thumnail show the modal with javascript/jquery:

$(".thumb").click(function(){
    $(".modal").slideToggle()
})

Here's a simple demonstration:

fiddle