DEV Community

Cem coduroglu
Cem coduroglu

Posted on


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;
Enter fullscreen mode Exit fullscreen mode


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;

Enter fullscreen mode Exit fullscreen mode


Top comments (1)

danwalsh profile image
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.

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git