Contents of page moves down when lightbox content opens - jquery

Question

When the link to my lightbox is clicked on - it moves the contents of the page below the light box. I have put z-index on css for my lightbox but I believe this isn't enough. I'm not sure which direction I need to go next. I am trying to keep the lightbox over top of the page content. I don't want the content on the page to move down, I would like the lightbox to overlay the original page's content.

My Fiddle: http://jsfiddle.net/stillb4llin/zZvLG/

I would think I need to create another function in jquery to insert into where I have put positionLightBox1(); (commented out)

I also think I'm doing the CSS wrong. I'd like to believe I have a firm grasp on css, but I'm sure you won't!

Experience with jquery: I've been playing with jquery for a few weeks (editing code and making it work for me) and I've done some reading and have created a few fiddles. Right now I've felt comfortable enough to create this with the help of some of my experience and some stack overflow answers.

Your comments are appreciated.

Answer 1

just move the tag at the end of the lightboxdiv declaration to after the closing of the lightboxcontentdiv. You might have to resize a bit, but it won't move the text behind it.

http://jsfiddle.net/MrMiracle/zZvLG/16/

Answer 2

might fixed it: http://jsfiddle.net/zZvLG/14/

Answer 3

lightBoxContent must have also position:absolute to function properly

Answer 4

Just make position:absolute on #lightBoxContent instead of position:relative

http://jsfiddle.net/zZvLG/9/

...this removes the lightbox from "the flow" and prevents it from pushing the other page contents further down.

Answer 5

<div ID="lightBoxDiv"></div> Why do you close it right after opening? I guess you meant to close if after closing the lightBoxContent div?