z-index not working as expected

[Warren Post]

I can't get the z-index to work as I understand it. On
<http://snow.prohosting.com/srcopan/anti/> I'm trying to position the
eagle image under the blue box. The image's parent (div navbar) has a
z-index of 1, and the blue box's parent (H1) has a default z-index of 5.
Div navbar and H1 share the same parent, div content. Thus the eagle image
should be below the blue box if I'm understanding correctly, but what
displays is the opposite: the eagle image is over the blue box.

I've tried without success:

* Insuring that the HTML and CSS validate * Explicity setting z-index
values of 5 on H1, div content, and body * Checking the page in different
browsers to see if it is a browser specific issue

Clearly I'm misunderstaning something about how z-index works. But what?

BTW, any other observations about the site are welcome. A lot of content
isn't in place yet but the overall design and structure are shaping up.

TIA,
Warren

[Ney André de Mello Zunino]

Warren Post wrote:

Clearly I'm misunderstaning something about how z-index works. But what?

The /z-index/ property only applies to _positioned elements_. That means
you would have to make your 'content' div a positioned element as well,
so that the layered approach would work.

Another possibility in this case would be to make the eagle image a
positioned background and use margins to control the position of the
navigation bar.

Regards,

--
Ney André de Mello Zunino

[Warren Post]

On Tue, 18 May 2004 14:48:45 -0600, Ney André de Mello Zunino wrote:

The /z-index/ property only applies to _positioned elements_. That means
you would have to make your 'content' div a positioned element as well,
so that the layered approach would work.

Thanks. Not only does that solve the immediate issue, I've learned
something as well.

Warren