View Full Version : How do i make a popup appear on top of everything?

11-18-2008, 08:26 PM
I have a webpage HERE (http://www.blackwolf-graphics.co.uk/usefullinks.html) and on this is an image. When the image is clicked it opens a larger version of that image but appears behind my navigation bar. How do I get it to appear on the top of everything, everytime?
Here is everything used to create the page:
JAVASCRIPT (http://www.blackwolf-graphics.co.uk/lightbox.js)
CSS for image (http://www.blackwolf-graphics.co.uk/lightbox.css)
CSS for webpage (http://www.blackwolf-graphics.co.uk/css/head.css)

11-18-2008, 08:40 PM


to your css

11-18-2008, 08:45 PM
Thanks, but to which part of the css?

11-18-2008, 08:55 PM
In the CSS for the overlay.

11-18-2008, 10:31 PM
I have done this and it still doesn't work. Could it be something to do with my navbar?
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
font-size: 0.8em;
padding-top: 0.4em;
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both; }
#overlay img{ border: none; z-index:99999 }

#overlay{ background-image: url(overlay.png); z-index:99999 }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");

Pepe, the bull
11-18-2008, 11:22 PM
Can't you only use z-index on an element that is positioned?

11-19-2008, 12:10 AM
Yep! Z-index only works on a positioned element. But you can use floats & margins, within a positioned div.

I have done this and it still doesn't work. Could it be something to do with my navbar?

You need to apply z-index to the container that holds the image, not the image itself. Make sure the navbar has a lower z-index number.


11-19-2008, 09:14 AM
Just add z-index:0; (in style )to your div having id="bwg_mg_ID1".

Btw, do you know why tables for layout is stupid: (http://www.hotdesign.com/seybold/)? . Also get rid of those inline styles, and use an external CSS.

11-19-2008, 09:29 AM
btw - your z-indexes do not have the end semicolon...