Divs and negative z-index

**hamstand** · Aug 11, 2006, 07:08

Ok. I have coded loads of sites in CSS but have never come across this problem before, and have hit a big bloody brick wall on it! Any help would be greatly appreciated.

So.... i have an outer div with a 1px border and other divs inside of this outer div, one of which i want to give a negative margin to so that it sits under the border of the outer div.... I thought i could just give the div i want to sit under the outer div a negative z-index, and this does actually work on FF, however IE6 and Safari 1.3.2 dont like it and it just appears above the border. does that make sense?

here's the code so you can see what i'm waffling on about....

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#outer {
		border:1px dashed green;
		border-bottom:0px;
		width:750px;
		position:relative;
		z-index:1000;
		}
#outerbtm {
	width:730px;
	border:1px dashed green;
	border-top:0px;
	position:relative;
	background:pink;
	padding:10px;
	}
#box1, #box2, #box3 {
		width:200px;
		position:relative;
		padding:10px;
		}
#box1 {
		background:red;
		height:100px;
		}
#box2 {
		background:cyan;
		margin-left:-10px;
		z-index:-1;
		}
#box3 {
		background:silver;
		}
</style>
</head>

<body>
<div id="outer">
<div id="box1">box1</div>
<div id="box2">Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </div>
<div id="box3">Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.</div>
</div>
<div id="outerbtm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.  Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut.</div>
</body>
</html>

thanks in advance for any help!

graham

**hamstand** · Aug 11, 2006, 07:52

hi there,

thanks for the quick reply...

So you mean wrap the outer div in another div? it doesn't seem to have any effect.....

The SitePoint Forums have moved.

User Tag List

Thread: Divs and negative z-index

Thread Tools

Display

Divs stacking order and negative z-index

Bookmarks

Bookmarks

Posting Permissions