Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Janie Tito
Janie Tito
829 Points

CSS slider - slide covering navigation

I have successfully followed the workshop up until the images are put in - the slide image is there, but it is in front of the navigation, so I can't click on the next slide. I don't want to copy the code from the example link, would rather understand why its not working. I thought that the z-index set at 10 tells it to be behind the header which has a z-index of 900....?? Thanks for your help.

html, body { height:100%; width:100%; margin: 0; padding: 0; }

.wrap { height: 100%; width: 100%; position: relative; overflow: hidden; background-color: #120103; color: #ffffff; text-align: center; }

header { background: pink; box-shadow: 0 .5em 1 em #111; top: 0; left: 0; z-index: 900; width: 100%; }

header label { color: #788188; cursor: pointer; display: inline-block; line-height: 4.25em; font-size: .667em; font-weight: bold; padding: 0 1em;

}

header label:hover { background: purple; }

.slide { height: 50%; width: 50%; position:absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-color: pink; background-position: 50% 50%; background-size: cover; }

.slide-one {background-image: url('../images/image1.jpg');} .slide-two {background-image: url('../images/image2.jpg');} .slide-three {background-image: url('../images/image3.jpg');} .slide-four {background-image: url('../images/image4.jpg');}

[id^="slide"]:checked + .slide { left: 0; z-index: 0; }

Janie Tito
Janie Tito
829 Points

Ah, hah! I added a position: absolute; in the header, so I guess z-index doesn't work without that?!

1 Answer

Steven Parker
Steven Parker
220,378 Points

:point_right: Z-index only works with positioned items.

Not just absolute, but there must be an explicit position (other than static).

Also be aware that it's only effective in comparison to the z-index of other items in the same positioning context. An element in a higher context will always cover one in a lower context no matter what their z-index values are.

Janie Tito
Janie Tito
829 Points

Thank you - very helpful. So, if there are two elements using position:absolute, I need to be very aware of each z-index for those elements, however the z-index wouldn't affect say, position:relative in another div? Thanks

Janie Tito
Janie Tito
829 Points

Also, how does one know which context is higher or lower?