z-index confusion...

[billybonds]

hi,

maybe i'm just thick but i'm having real difficulty getting the z-index property to work for me.

i have two images to make up my header and if it were to succeed it would be a gif image placed over a jpeg image.

the CSS is

#logo {
position:relative;
z-index: 20;
left: 0;
top: 0;
margin: 0 0 0 0;
padding: 0;
}

#picture {
position:relative;
z-index: 10;
left: 0;
top: 10px;
margin: 0 0 0 0;
padding: 0;
}

and the html is

<div id="content"><div id="logo"><img src="images/logo_text.gif"></div><div id="picture"><img src="images/logo_picture.jpg"></div>
</div>

however this just places the logo image before the jpeg in the flow of the page with no overlap.

any help would be greatly appreciated....

thanks

jim

[Distel]

try position:absolute.

[Reflection]

By positioning them relatively you are positioning them relative to how they would normally be in the flow of the document. Since both of the div's have a left coordinate of 0, they are going to remain in the same horizontal position as they would have without positioning, in other words they wont overlap.

[billybonds]

thank you to both of you...

i have been avoiding relative positioning because i have my page centred in the screen and anything i have positioned absolutely has moved depending on the resolution viewed through. obviously there is a way to do this - i just don't know it....

reflection - i have taken into account what you have just told me

#logo {
position:relative;
z-index: 20;
left: 0;
top: 0;
margin: 0 0 0 0;
padding: 0;
}

#picture {
position:relative;
z-index: 10;
left: 0;
top: -137px;
margin: 0 0 0 0;
padding: 0;
}

now the desired image sits on top ot the other image as desired... many thanks for moving me forward.

....however now there sits a great big white space (the size of the jpeg image) beneath the header where the jpeg was sitting when it wasn't working at all!?

jim

[billybonds]

not to worry...

i think i might well be scrapping the idea for the moment. i initially wanted to do this because of the way text degrades as a jpeg image unless you go to a very high quality - i though if i saved the text as a gif and positioned on top of the photo image that had been saved as a medium/low quality jpeg it would avoid the problem. however even when saved as a gif with 256 colours the text appears very blocky on the image with white around as well. not pretty.....

jim

[garann]

Hi Jim,

In case you come back to this method later..
There's a hack I've seen in these forums where you can center an absolutely positioned div by setting the left property to 50% and setting the left-margin to negative half the width of your div. That should enable you to position your gif and jpg absolutely, giving you a nice overlap without them taking up space you don't want them to.

[billybonds]

thanks garann

somebody on another forum has suggested that rather than save a gif image of the text, i could always position some normal text over the image..... so i'm trying to go with that - still struggling with the white space though :(

jim

[drbrain]

You want to use a mixture of absolute and relative positioning to accomplish this, similar to a "titlebox" effect. See my post (msg #22) in Absolute Positioning and Positioning With Padding/Margins/Etc... [webmasterworld.com]

In short, you probably want to have your picture relatively positioned with no offset, then absolutely position text over the top of it, something like:

#picture { position: relative }
#logo { position: absolute; top: 10px; }

[billybonds]

thanks drbrain, i'll have a read of that post...

jim