Question about behavior of Z-index

[pghtech]

I have recently implemented an Z-Index for my #container, and applied Images using hte Z-index to position behind my container div which houses all sections of my website.

However, what I have read and what it does it two different things.
I had expected to give values of 1,2,3... for the container and img and the files behave with 1 being of highest value.

Setting container to Z-index:1 and img to Z-index: 2 (Or even visa-versa) it always put the image on top.

I had to use 1 and -1 with the image being set to z-index: -1 to put behind the container.

So is that correct - or why did I read that it would take 1,2,3 ...ect for setting the z-index?

[alias]

firstly, z-index will only work for elements positioned absolutely or relatively, so you need to set position:relative or in case you need it - position:absolute for the z-index setting to work at all.

second - the higher z-index has the priority, so z-index:100 will be stacked on top of any sibling z-index:1 (to 99) elements.

try searching the net for "css z-index stacking" for more examples and tutorials - it should help.

M.

[SuzyUK]

if you're trying to position images to the background, can you not just use the CSS background-image property? that would avoid the need for messing with the stacking context in the first place.

using -1 should work (z-index can be positive or negative), but it does require an understanding of the various other stacks on the page, and the ordering of their background/borders/text etc..

[pghtech]

Thanks for all the replies.
I do have two images and I was using the z-index to place the images at certain locations:
1: at the bottom left corner of the container with part of the image to the left of the container and part below the container;
2: the second image at the top right corner of the container.

Since the width of the page is not adjusting the top right corner wouldn't ever need to adjust. But the bottom right corner will need to adjust based on the length of the page which will change based on the page content. So I was hoping not to have to adjust the image and someone suggested using -#'s positioning and z-index to do just that.

Thus the reason for not using a background image (for two reasons, it will not adjust appropriately, and I would need to change the physical image of the background for every page that the length is different.)

[vincevincevince]

It is absolutely a problem with your position: setting - ensure both elements are set to position:relative and then try again.

-1 refers to behind everything; which is why it 'works'

[pghtech]

Thanks VIncevincevince:

In regards to the bottom left image as an example:

When I set it to "relative" and use + numbers, those positioning numbers start at the outside of the container. In other words, I can never move the image "underneath" the container. The image is setup to where I would like part of it underneith the corner of the container.

So far, with a + z-index, relative positioning, and + numbers for positioning only puts the image to the edge of the container (which to me sounds logical - with the "relative" positioning.