z-index not functioning correctly

Question

For some reason, my z-indexs are not working.

¬ .levelThree pos:ab
      ¬ .internalMenu > ul > li pos:rel
           ¬ .levelFive pos:ab

.levelFive should be in front of all other elements.

Js Fiddle Here

sandeep · Accepted Answer · 2013-02-04 10:06:00Z

1

Give z-index to your li.active. Write like this:

.internalMenu > ul > li, .levelThree > ul > li.active{
    z-index:10;
}

Check this http://jsfiddle.net/dCYdw/10/

answered Feb 4, 2013 at 10:06

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

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

Comments

Adam Jenkins · Accepted Answer · 2013-02-04 10:07:31Z

0

If you want level five to appear in front of all other elements, you don't even need to set z-indicies, as the natural stacking order will have children on top of parents.

For the record though, I do see this (shortened), which is wrong:

.levelFive { z-index: 2; }
.levelThree li { z-index: 3; }

That explicitly says that all li's in .levelThree (including the parents of .levelFive) have a higher z-index than anything in levelFive.

So, your title is incorrect, z-index does function correctly, you have no coded it correctly, however.

answered Feb 4, 2013 at 10:07

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

1 Comment

Jamie Hutber Over a year ago

agree with all your comments. Although i need the z-indexs on levelThree, hence me using it. But spot on with .levelThree li having a z-index. I didn't spot this.

Collectives™ on Stack Overflow

z-index not functioning correctly

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related