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

JavaScript Using jQuery Plugins Using a jQuery Carousel Debugging: When Plugins Collide

Posted by George Akinian
George Akinian
17,615 Points

why z-index: 1000; ?

Why not z-index: 5; for example?

3 Answers

Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points
Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hello Paul. How are you? It's just a "common" thing to do, when you're applying too many z-indexes on the page and you lost your count. Perhaps, if you can't remember if 5, 20 or 34 was the last one.

Also, sometimes when including an external stylesheet or a jQuery plugin, certain HTML elements can have their z-index values of 100 - for the same reason or probably because the author of the mentioned wants the certain element to be displayed on top of others and don't want to screw your current layout, if you were already using z-index property. For that reason, when you simply want to override the styles from an external stylesheet or plugin, you'll simply bump up the value as high as you can (more than the author of the linked .css or .js file thought you'll ever do, lol).

But yeah, if your highest value was for example 7, the z-index of 1000, 100 and 8 on another HTML element will result in the same way; positioning the element with a higher z-index value on top of the other if they are overlapping.

Hope that helps! = ) Cheers

Thummanoon Kunanuntakij
Thummanoon Kunanuntakij
8,676 Points
Thummanoon Kunanuntakij
Thummanoon Kunanuntakij
8,676 Points

For future viewer,

If you look at the slick plugin carousel via developer tools, you will see that it apply a z-index of 900 so you need to set the navigation bar with higher number, in this case 1000.

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

Good point Ognjen. Thanks for a quick reply.