Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by troy beckett
troy beckett
12,035 Points

z-index not working on element?

I have a div with a burger sign on, covered by another div. I want the burger sign to stack on top of everything. So I applied z-index values to the places I thought appropriate. However it doesn't work. Can anyone explain why? Here is my codepen below please take a look.

codepen:

http://codepen.io/tbeckett24/pen/qORBbE

if you find a solution it would be really handy if you could explain what I'd done wrong as it was really confusing me. Thanks in advance for your help.

1 Answer

Tim Knight
Tim Knight
28,888 Points

Troy,

You're going to want to set a z-index to the parent elements as well. That means that .menu needs a higher z-index than .menu-triggeras will #photoCover because both of those items are currently covering up .menu-trigger.

One thing you might consider too, to simplify things would be to let .menu deal with all of your position while .menu-trigger just sits inside of it and is positioned by its parent... unless there is an absolute reason to fix position both items.