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>

Possible duplicate of [How to position text over an image in css](http://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) — Paradox, Aug 24 '16 at 17:33
You have to set position of your h2 to relative and z-index will work. However, I would structure this a little different. I would place h2 inside the .img-wrapper and position it absolutely. — Vcasso, Aug 24 '16 at 17:36
@Valius79 that worked!! post that as an answer so i can upvote you and accept it as an answer. you deserve points for this — cup_of, Aug 24 '16 at 17:38
It is fine, just accept the one below. The same answer. I am glad I could have helped! — Vcasso, Aug 24 '16 at 17:51

score 3 · Accepted Answer · answered Aug 24 '16 at 17:39

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.

score 2 · Answer 2 · answered Aug 24 '16 at 17:39

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.

answered Aug 24 '16 at 17:39

Lucas Villanueva

21
4

score 1 · Answer 3 · edited May 23 '17 at 12:33

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>

score 1 · Answer 4 · answered Aug 24 '16 at 17:46

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>

Make text appear in front of an relatively positioned image

4 Answers4