Make text appear in front of an relatively positioned image

Question

I have an image that is position: relative and it is going over some text.

Is there a way to make the text appear in front of the image?

I tried messing with z-index but to no avail.

Here is my code

 h2 { padding-top: 100px; } img { position: relative; top: -150px; } 

 <h2>1715</h2> <div class="img-wrapper"> <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" > </div> 

Answer 1

 h2 { padding-top: 100px; z-index:1; position:relative; } img { position: relative; top: -200px; z-index:0; } 

 <h2>1715</h2> <div class="img-wrapper"> <img src="https://bootstrapbay.com/blog/wp-content/uploads/2014/05/unslpash-desert-road_uvsq5s.png" > </div> 

posibble solution if you dont want to change the html structure.

Answer 2

In order for z-index to work, it cannot be positioned static (default). In this case, try position: relative and z-index will work.

Answer 3

Try putting both elements in a container with position: relative .

Then you can absolutely position the children and apply z-index to them.

I've also centered the text for the illustration.

Always good to keep in mind: Unless you're working with flex items or grid items, an element must be positioned for z-index to work ( details ).

 #container { position: relative; display: inline-block; } h2 { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; } img {} 

 <div id="container"> <h2>1715</h2> <div class="img-wrapper"> <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg"> </div> </div> 

Answer 4

YOU can solve it by this way .

h2 {
     padding-top: 94px;
position: relative;
z-index: 999;
    }

    img {
         position: absolute;
top: 0;
    }

  h2 { padding-top: 94px; position: relative; z-index: 999; } img { position: absolute; top: 0; } 

 <h2>1715</h2> <div class="img-wrapper"> <img src="http://cdn.xl.thumbs.canstockphoto.com/canstock24510515.jpg" > </div>