By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,395 Members | 1,882 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,395 IT Pros & Developers. It's quick & easy.

z-index not working as expected

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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
Jul 20 '05 #2

P: n/a
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

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.