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;
}`
`
Top comments (1)
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.