5 replies [Last post]
next
Offline
Regular
Last seen: 12 years 26 weeks ago
Joined: 2008-01-27
Posts: 11
Points: 0

I can't seem to get z-index to work:
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Untitled Document</title>
</head>
 
<body id="doc3" class="yui-t4">
	<div id="container">
		<div id="hd"></div>
		<div id="bd">
			<div id="yui-main">
				<div id="yui-b">
 
				</div>
			</div>
 
			<div id="yui-b"></div>
		</div>
		<div id="ft"> </div>
	</div>
</body>
</html>

CSS:
@charset "utf-8";
html {
	background: url(assets/bg.gif) top left repeat;
}
#doc3 {
	min-height: 600px;
	position: relative;
	z-index: 1;
	background: url(assets/logo.gif) top left no-repeat;
}
#container {
	min-height: 600px;
	background: url(assets/sp_man.gif) top right no-repeat;
	position: relative;
	z-index: 5;
}
#hd {
	height: 200px;
	position: relative;
	z-index: 0;
	background: url(assets/hd.gif) top right repeat-x;
}

It just doesn't work, no matter what i do. I tried using position: absolute, didn't help, i tried specifying top ,left ,bottom ,right all set at 0, didn't work. Any one knows how i can get it work???
Here's what it looks like at the moment:

and here is what i'm aiming at:

Thanks in advance.

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 21 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Not enough to go on... Put

Not enough to go on...

Put it on a public sever with a clickable link in your post to the page/problem in question.

next
Offline
Regular
Last seen: 12 years 26 weeks ago
Joined: 2008-01-27
Posts: 11
Points: 0

Where is page/problem in

Where is page/problem in question, is it a subforum?

Here's a link to pub: http://www.autohotkey.net/~next/debug/

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Z-index can be a pain, so

Z-index can be a pain, so don't use it until you need it. Don't set z-index on every single part of your page.

You would not want to set the spman image on the container and then try to make the container cover the rest of the page. That's what's happening. Instead, take spman out of the container and sit him in a box that is a child of #container (like #hd is a child of #container) and then set his z-index. Right now #hd is covering spman because it's a child of #container and positioned relatively so it's already beginning at that same z-index as #container is, and then naturally sits one level higher up because it's a child (children sit on top of their parents usually).

So do
#container {
all normal styles, no z-index
}
#hd {
styles, no z-index;
}

#spmanbox (whatever box is there you could use, otherwise he could be an HTML IMG as well) {
position him with margins;
z-index: 10;
anything else;
}

See I set the codes for hd first cause it's a child of #container. I almost always set my CSS in order of how they appear in the HTML document. This usually makes more sense than randomly setting things in the CSS, plus sometimes the later-listed thing overrides something you set earlier, part of the Cascade of CSS, and if you don't do things in order it's hard to find when that's happening.

I'm no expert, but I fake one on teh Internets

next
Offline
Regular
Last seen: 12 years 26 weeks ago
Joined: 2008-01-27
Posts: 11
Points: 0

Thanks Stomme poes! I did a

Thanks Stomme poes! I did a lot of research on z-index yesterday and it appears that using it is a bit more complicated than assigning a simple integer value.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yeah it's a bugger

Yeah it's a bugger sometimes, so I rarely find myself using it. I think DW users are the heaviest users of z-index for some reason. There is a natural z-index already in place before you start mentioning it, plus IE has at least one z-index bug (which I've only run into personally once), making it iffy. If you leave it off until you absolutley need it, you'll find it working better for you.

I'm no expert, but I fake one on teh Internets