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.
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.