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 Darrell Warren
Darrell Warren
6,644 Points

Use of Z-Index

Why is the "Z-Index" property not used when dealing with the "photo" and "photo-overlay" classes. I mean the transition works, but how without the "z-index"? I'm confused...

3 Answers

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Z-index is used whenever you need it really.

Z-index displays the order of what to display first. if you have a navigation bar that is fixed top all the time, and you scroll down and it meets an image, the image by default from my experience has a higher natural z-index and so the navigation is behind it while passing throw the image. If you put z-index on navbar 9999 it will be alwasy at the top.

When doing overlay, z-index can be usefull on what you said, but then, that depends on what you are trying to do.

O hope this helps somehow.

Darrell Warren
Darrell Warren
6,644 Points

I am referring to the exercise(s) in: CSS Transitions and Transforms > Getting Started with CSS Transitions > The Transition Challenge Solution... Thank you.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, if you can post the video here please, and or the challenge link and question. I don't have treehouse subscription but i might help you with the challenge if you post it since i can't check it out either.

Darrell Warren
Darrell Warren
6,644 Points
Darrell Warren
Darrell Warren
6,644 Points

For those answering, I am referring to the exercise(s) in: CSS Transitions and Transforms > Getting Started with CSS Transitions > The Transition Challenge Solution... Thank you.

Joel Bardsley
Joel Bardsley
31,258 Points
Joel Bardsley
Joel Bardsley
31,258 Points

Hi Darrell, if you refer to main.css in the project workspace:

.photo is the parent div with position: relative applied to it.

.photo-overlay is its child div and has position: absolute with zero values applied to top, right, bottom and left to make it the same size and position as its parent .photo. This makes it appear on top without the need for a z-index.

If you need a reminder of css positioning, here's a relevant video from the CSS Layout Basics course: https://teamtreehouse.com/library/css-layout-basics/positioning-page-content/positioning-elements-relative-to-other-elements