CSSにてz-indexが効かない

前提・実現したいこと

CSSにて指定したz-indexが全く効きません。
対処法をご教授頂けたらと存じます。

これを

このようにしたいです。

該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <header>
12    <div class='container'>  
13      <img src="https://prog-8.com/images/html/advanced/main_logo.png">
14      <a href="#">ログイン</a>
15    </div>
16  </header>
17  <div class='top-wrapper'>
18    <div class='container'>
19      <h1>LEARN TO CODE.</h1>
20      <h1>LEARN TO BE CREATIVE.</h1>
21      <p>Progateはオンラインプログラミング学習サービスです。</p>
22      <p>初心者にも優しいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
23      <div class='sign'>
24        <a href="#" class='sign-up'>新規登録はこちら</a>
25        <p>or</p>
26        <a href="#" class='facebook'><span class='fa fa-facebook'></span> Facebookで登録</a>
27        <a href="#" class='twitter'><span class='fa fa-twitter'></span> Twitterで登録</a>
28      </div>
29    </div>
30  </div>
31  <div class='lesson-wrapper'>
32    <div class='container'>
33      <h2>Learn Where to Get Started!</h2>
34    </div>
35  </div>
36  
37</body>
38</html>
39

CSS
1
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.top-wrapper{
23  background-image: url(https://prog-8.com/images/html/advanced/top.png);
24  padding: 180px 0 100px 0;
25  background-size: cover;
26}
27
28.container{
29  width: 1170px;
30  margin: 0 auto;
31  text-align: center;
32  color: white;
33}
34
35.container h1{
36  letter-spacing: 5px;
37  font-size: 45px;
38  font-weight: 5px;
39  opacity: 0.7;
40}
41
42.container p{
43  opacity: 0.7;
44}
45
46.sign a{
47  display: inline-block;
48  color: white;
49  padding: 8px 24px;
50  opacity: 0.8;
51  border-radius: 4px;
52}
53
54.sign-up{
55  margin: 30px 0 15px 0;
56  background-color: #239b76;
57}
58
59.facebook{
60  margin-top: 15px;
61  background-color: #3b5998;
62  margin-right: 10px;
63  
64}
65
66.twitter{
67  background-color: #55acee;
68}
69
70.sign a:hover{
71  opacity: 1;
72}
73
74header{
75  background-color: rgba(34, 49, 52, 0.9);
76  height: 65px;
77  width: 100%;
78  position: fixed;
79  z-index: 10px;
80}
81
82header img{
83  float: left;
84  width: 124px;
85  margin-top: 20px;
86}
87
88header a{
89  float: right;
90  background-color: rgba(255, 255, 255, 0.3);
91  color: white;
92  height: 65px;
93  padding-left: 25px;
94  padding-right: 25px;
95  line-height: 65px;
96  transition: all 0.5s
97}
98
99header a:hover{
100  background-color: rgba(255, 255, 255, 0.5);
101}
102
103.lesson-wrapper h2{
104  text-align: center;
105  margin-top: 80px;
106  color: #5f5d60;
107  font-weight: normal;
108}
109