z-index appearing in wrong order

**harshmaul** · May 14 '12, 04:29 PM

your div id "light" has negative top position. Thats making it appear higher than the browsers view port.

If i remove that, or give it a positive top position, i am able to see it. Does that seem right to you?

Try it and let me know if there is something else i am missing.

**Rabbit** · May 14 '12, 05:32 PM

This is from my code library, complete with animation, and code to select a picture to go in the lightbox:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>LIGHTBOX EXAMPLE</title>
		
		<style>
			body {
				background-color: black;
			}
			
			.black_overlay{
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: white;
				z-index:1001;
				-moz-opacity: 0.5;
				opacity:.50;
				filter: alpha(opacity=50);
			}
			
			.white_content {
				display: none;
				position: absolute;
				top: 5%;
				left: 5%;
				width: 90%;
				height: 90%;
				padding: 20px;
				background-color: black;
				z-index:1002;
				border-width: 10px;
				border-style: solid;
				border-color: #FF0000;
			}
			
			.upper {
				height: 95%;
				overflow: auto;
				text-align: center;
			}
			
			.upper span {
				display: inline-block;
				height: 100%;
				width: 1px;
			}
			
			.upper * {
					vertical-align: middle;
			}
			
			.lower {
				height: 5%;
				overflow: hidden;
				text-align: right;
			}
			
			a {
				color: red;
			}
		</style>
	
		<script type="text/javascript">
			var redirectagent = navigator.userAgent.toLowerCase();
			var redirect_devices = ['vnd.wap.xhtml+xml', 'sony', 'symbian', 'nokia', 'samsung', 'mobile', 'windows ce', 'epoc', 'opera mini', 'nitro', 'j2me', 'midp-', 'cldc-', 'netfront', 'mot', 'up.browser', 'up.link', 'audiovox', 'blackberry', 'ericsson', 'panasonic', 'philips', 'sanyo', 'sharp', 'sie-', 'portalmmm', 'blazer', 'avantgo', 'danger', 'palm', 'series60', 'palmsource', 'pocketpc', 'smartphone', 'rover', 'ipaq', 'au-mic', 'alcatel', 'ericy', 'vodafone', 'wap1', 'wap2', 'teleca', 'playstation', 'lge', 'lg-', 'iphone', 'android', 'htc', 'dream', 'webos', 'bolt', 'nintendo'];
			for (var i in redirect_devices) {
				if (redirectagent.indexOf(redirect_devices[i]) != -1) {
					location.replace("http://www.google.com/");
				}
			}
		
			var i, inter;
			var boxSize = 90;
			
			function showBox(strPic) {
				document.getElementById('light').style.display = 'block';
				document.getElementById('upper').style.overflow = 'hidden';
				document.getElementById('fade').style.display = 'block';
				document.getElementById('pic').src = strPic;
				
				i = 2;
				animBox(1);
				inter = window.setInterval('animBox(1)', 10);
			}
			
			function hideBox() {
				document.getElementById('upper').style.overflow = 'hidden';
				i = document.getElementById('light').style.height.toString().replace('%', '');
				inter = window.setInterval('animBox(2)', 10);
			}
			
			function animBox(mode) {
				document.getElementById('light').style.height = i + '%';
				document.getElementById('light').style.width = i + '%';
				document.getElementById('light').style.top = (100 - i) / 2 + '%';
				document.getElementById('light').style.left = (100 - i) / 2 + '%';
				
				if (mode == 1) {
					i = i + 6;
					
					if (i > boxSize) {
						inter = window.clearInterval(inter);
						document.getElementById('upper').style.overflow = 'auto';
					}
				} else {
					i = i - 6;
					
					if (i <= 0) {
						inter = window.clearInterval(inter);
						document.getElementById('light').style.display = 'none';
						document.getElementById('fade').style.display = 'none';
					}
				} 
			}
		</script>
	</head>
	
	<body>
		<p><a href="javascript:void(0)" onclick="showBox('image.JPG')">Test</a>
		
		<div id="light" class="white_content">
			<div id="upper" class="upper">
				<span></span>
				<img id="pic" src="" />
			</div>
			
			<div class="lower">
				<a href="javascript:void(0)" onclick="hideBox()">Close</a>
			</div>
		</div>
		<div id="fade" class="black_overlay"></div>
	</body>
</html>

**KeredDrahcir** · May 26 '12, 12:21 PM

Thanks harshmaul. The reason I had a negative magrin was that the link for the lightbox was right at the bottom of the page and it was displaying too low with the bottom going over the bottom of the page so I needed to move it up a bit.
I'll try changing to margin to a positive value or to zero and see if I can move it some other way. Can you suggest anything?

**KeredDrahcir** · May 26 '12, 12:27 PM

I tried what you suggested harshmaul and managed to move it to where I want it to see by moving the code up a bit and changing the margin to positive 150. It still doesn't work. I still get the black on top.
Would you like a link to see if you can see what is going wrong on my website?

**KeredDrahcir** · May 27 '12, 05:37 PM

I've had a look and found that I opened the division for the black overlay before closing the division on the light box. Just incorrect nesting. Maybe if I'd validated it I'd have found it out later.

Hopefully somebody will find the code helpful.

z-index appearing in wrong order

z-index appearing in wrong order

Comment

Comment

Comment

Comment

Comment