Why z-index is not working?

Hey guys, i am on udemy course which we are creating Responsive web sites with the teacher. I follow him step by step. But when it comes to z-index situation. I can't move my text in front of my images. But teacher does. :/
I don't know i followed him step by step but it won't working.

recent codes are;

`*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-size: 10px;

}

body {
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
background-color: #333;
}

a {
text-decoration: none;
}

p {
padding: 1.6rem 0;
}

header {

height: 46rem;
background: lightskyblue;

}

header .bg-image {
position: absolute;
background-image: url(images/fotoğraf2.jpg);
background-size: cover;
background-position: center;
height: 46rem;
width: 100%;
opacity: 0.5;
z-index: -1;

}

header h1 {
padding: 12rem;
padding-bottom: 0;

}

.btn {
display: inline-block;
background: #333;
color: #fff;
border: 1px solid #666;
padding: 1.6rem 3.2rem;
margin: .5rem 0;
transition: all 0.4s;
}

.btn:hover {
background-color: #fff;
color: #333;
}`

`

Comments

[Dan Walsh]

If the image is absolutely positioned then it will be placed into a separate block formatting context. To see the text you would need to also absolutely position the text. Alternatively, you could implement your image using a ::before pseudo element.