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; }