Lightbox problema Z-index

[demoche]

Alguien me puede ayudar, tengo una DIV en la cual cargo un archivo HTML donde
he agregado un lightbox "prettyPhoto", todo bien solo que el mismo se desarrolla dentro de la DIV no puedo hacer que se desarrolle sobre la web en si, osea sobre el HTML que contiene esa DIV.
He probado con Z-INDEX y no he tenido suerte, por donde puede estar la causa?
Gracias
demoche

[joseoliveras]

Disculpa, no te entiendo.
Un link? un poco de código ?

[demoche]

El asunto es así, tengo una div la cual carga un html en la misma, en ese html
he agregado una galeria jQuery LIGHTBOX "prettyPhoto" pues bien cuando hago click en la imagen el lightbox funciona dentro de la
div que contiene ese html, el problema es que yo quiero que lo haga saliendo de la div y aparesca por sobre el sitio mismo, espero haber sido claro, este el css por las dudas.
Yo puse el script de la libreria de lightbox y css en el html que carga esa div con el fin de evitar conflicto con otras librerias que uso en el index del sitio.
Gracias!

Código HTML:

div.pp_pic_holder a:focus { outline:none; }

	div.pp_overlay {
		background: #000;
		display: none;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9999;
	}
	
	div.pp_pic_holder {
		display: none;
		position: absolute;
		width: 100px;
		z-index: 10000;
	}

		
		.pp_top {
			height: 20px;
			position: relative;
		}
			* html .pp_top { padding: 0 20px; }
		
			.pp_top .pp_left {
				height: 20px;
				left: 0;
				position: absolute;
				width: 20px;
			}
			.pp_top .pp_middle {
				height: 20px;
				left: 20px;
				position: absolute;
				right: 20px;
			}
				* html .pp_top .pp_middle {
					left: 0;
					position: static;
				}
			
			.pp_top .pp_right {
				height: 20px;
				left: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
			}
		
		.pp_content { height: 40px; min-width: 40px; }
		* html .pp_content { width: 40px; }
		
		.pp_fade { display: none; }
		
		.pp_content_container {
			position: relative;
			text-align: left;
			width: 100%;
		}
		
			.pp_content_container .pp_left { padding-left: 20px; }
			.pp_content_container .pp_right { padding-right: 20px; }
		
			.pp_content_container .pp_details {
				float: left;
				margin: 10px 0 2px 0;
			}
				.pp_description {
					display: none;
					margin: 0;
				}
				
				.pp_social { float: left; margin: 7px 0 0 0; }
				.pp_social .facebook { float: left; position: relative; top: -1px; margin-left: 5px; width: 55px; overflow: hidden; }
				.pp_social .twitter { float: left; }
				
				.pp_nav {
					clear: right;
					float: left;
					margin: 3px 10px 0 0;
				}
				
					.pp_nav p {
						float: left;
						margin: 2px 4px;
					}
					
					.pp_nav .pp_play,
					.pp_nav .pp_pause {
						float: left;
						margin-right: 4px;
						text-indent: -10000px;
					}
				
					a.pp_arrow_previous,
					a.pp_arrow_next {
						display: block;
						float: left;
						height: 15px;
						margin-top: 3px;
						overflow: hidden;
						text-indent: -10000px;
						width: 14px;
					}
		
		.pp_hoverContainer {
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 2000;
		}
		
		.pp_gallery {
			display: none;
			left: 50%;
			margin-top: -50px;
			position: absolute;
			z-index: 10000;
		}
		
			.pp_gallery div {
				float: left;
				overflow: hidden;
				position: relative;
			}
			
			.pp_gallery ul {
				float: left;
				height: 35px;
				margin: 0 0 0 5px;
				padding: 0;
				position: relative;
				white-space: nowrap;
			}
			
			.pp_gallery ul a {
				border: 1px #000 solid;
				border: 1px rgba(0,0,0,0.5) solid;
				display: block;
				float: left;
				height: 33px;
				overflow: hidden;
			}
			
			.pp_gallery ul a:hover,
			.pp_gallery li.selected a { border-color: #fff; }
			
			.pp_gallery ul a img { border: 0; }
			
			.pp_gallery li {
				display: block;
				float: left;
				margin: 0 5px 0 0;
				padding: 0;
			}
			
			.pp_gallery li.default a {
				background: url(../img/ima_lightbox/facebook/default_thumbnail.gif) 0 0 no-repeat;
				display: block;
				height: 33px;
				width: 50px;
			}
			
			.pp_gallery li.default a img { display: none; }
			
			.pp_gallery .pp_arrow_previous,
			.pp_gallery .pp_arrow_next {
				margin-top: 7px !important;
			}
		
		a.pp_next {
			background: url(../img/ima_lightbox/light_rounded/btnNext.png) 10000px 10000px no-repeat;
			display: block;
			float: right;
			height: 100%;
			text-indent: -10000px;
			width: 49%;
		}
			
		a.pp_previous {
			background: url(../img/ima_lightbox/light_rounded/btnNext.png) 10000px 10000px no-repeat;
			display: block;
			float: left;
			height: 100%;
			text-indent: -10000px;
			width: 49%;
		}
		
		a.pp_expand,
		a.pp_contract {
			cursor: pointer;
			display: none;
			height: 20px;	
			position: absolute;
			right: 30px;
			text-indent: -10000px;
			top: 10px;
			width: 20px;
			z-index: 20000;
		}
			
		a.pp_close {
			position: absolute; right: 0; top: 0; 
			display: block;
			line-height:22px;
			text-indent: -10000px;
		}
		
		.pp_bottom {
			height: 20px;
			position: relative;
		}
			* html .pp_bottom { padding: 0 20px; }
			
			.pp_bottom .pp_left {
				height: 20px;
				left: 0;
				position: absolute;
				width: 20px;
			}
			.pp_bottom .pp_middle {
				height: 20px;
				left: 20px;
				position: absolute;
				right: 20px;
			}
				* html .pp_bottom .pp_middle {
					left: 0;
					position: static;
				}
				
			.pp_bottom .pp_right {
				height: 20px;
				left: auto;
				position: absolute;
				right: 0;
				top: 0;
				width: 20px;
			}
		
		.pp_loaderIcon {
			display: block;
			height: 24px;
			left: 50%;
			margin: -12px 0 0 -12px;
			position: absolute;
			top: 50%;
			width: 24px;
		}
		
		#pp_full_res {
			line-height: 1 !important;
		}
		
			#pp_full_res .pp_inline {
				text-align: left;
			}
			
				#pp_full_res .pp_inline p { margin: 0 0 15px 0; }
	
		div.ppt {
			color: #fff;
			display: none;
			font-size: 17px;
			margin: 0 0 5px 15px;
			z-index: 9999;
		}

[joseoliveras]

Vale, ahora pon el HTML

[demoche]

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Home</title>
<link href="css/sections.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/js_lightbox/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/js_lightbox/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>
</head>

<body>
<div id="main_section"><div id="bkg_section"><span class="titleSECTION">Merchandising</span></div>
  <br />
  <div id="content_section"><a href="img/ima_sleeves/big01.jpg" rel="prettyPhoto[mixed]"><img title="CLIK" src="img/ima_sleeves/1.gif" width="125" height="125" alt="CLICK" /></a><a href="img/ima_sleeves/big02.jpg" rel="prettyPhoto[mixed]"><img title="CLIK" src="img/ima_sleeves/2.gif" width="125" height="125" alt="CLICK" /></a><a href="img/ima_sleeves/big03.jpg" rel="prettyPhoto[mixed]"><img title="CLIK" src="img/ima_sleeves/3.gif" width="125" height="125" alt="CLICK" /></a><a href="img/ima_sleeves/big01.jpg" rel="prettyPhoto[mixed]"><img title="CLIK" src="img/ima_sleeves/1.gif" width="125" height="125" alt="CLICK" /></a></div></div>
</body>
</html> 

Espero que ahora puedas ayudarme.
Gracias
:)

[joseoliveras]

Vale, creo que lo que quieres decir es que el link a la imágen no se te abre en la modal window ¿es eso?

[demoche]

Exacto en toda la pantalla deberia abrirse y no sobre la superficie de lo que mide la DIV

[joseoliveras]

Lo más probable es que el link a los archivos JS o a la CSS no estén bien, revisalos, mirare bien la documentación del programador.