Z-index issue with CSS

Question

I need the page1, page2, and page3 links to be hidden behind the #site div. Right now they aren't. It has to be some z-index issue, no z-indexes I use work though.

So the #nav ul ul li should appear behind the #site div. Then when you hover over the "parent page" it will reveal those pages.

Here's a demo of the site: http://tempsmz.hostzi.com/

Are you about to create a drop down menu?

Lars Knickrehm
– Lars Knickrehm

2012-08-05 02:30:36 +00:00
Commented Aug 5, 2012 at 2:30 — Lars Knickrehm
– Lars Knickrehm, Commented Aug 5, 2012 at 2:30

Ricardo Souza · Accepted Answer · 2012-08-05 02:38:03Z

1

The z-index property only works with positioned elements (fixed, absolute and relative). Try adding a position: relative; to the elements and apply the desired z-index, like 1 for the nav and 2 for the site containers.

answered Aug 5, 2012 at 2:38

Ricardo Souza

16.5k6 gold badges40 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Airman Over a year ago

Thank you rdcmk, worked a treat. Can't believe I forgot that! What a dult I am tonight, been up all night. Anyway to fix the now caused issue?

Airman Over a year ago

What I'm trying to get is the parent pages to appear next to each other on the top of the page, like this: cl.ly/IWgu Then when a user hovers over a parent page with a submenu, it slides down to reveal the submenu/child pages - make sense?

Ricardo Souza Over a year ago

It makes all sense. If you follow my instructions, or PeterVR's, since I gave the answer first, but he suggested the white background (don't know if it was needed, 'cause i tested without it and it worked), you can get it working.

Pevara · Accepted Answer · 2012-08-05 03:22:09Z

0

To make the z-index work you should always add position: relative (or absolute or fixed). Also he div that you are covering the links with has actualy got a a transparent background. Try setting it to white and they should disappear like you want.

edited Aug 5, 2012 at 3:22

answered Aug 5, 2012 at 2:38

Pevara

14.3k1 gold badge37 silver badges49 bronze badges

2 Comments

Airman Over a year ago

What do you mean? I got it working, can you look at the issue now?

Pevara Over a year ago

you set all your positions to absolute now. Why did you do that? In the previous version you just had to add position: relative and background-color: #fff to the header div. I had it working in the chrome inspector before i posted my answer...

Collectives™ on Stack Overflow

Z-index issue with CSS

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related