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 trialJanie Tito
829 PointsCSS 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; }
1 Answer
Steven Parker
229,204 PointsZ-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
829 PointsThank 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
829 PointsAlso, how does one know which context is higher or lower?
Janie Tito
829 PointsJanie Tito
829 PointsAh, hah! I added a position: absolute; in the header, so I guess z-index doesn't work without that?!