CODEWITHSUNDEEP
htmlcsscss-positionz-index
cup_of
cup_of

Reputation: 6687

Make text appear in front of an relatively positioned image

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>

Upvotes: 2

Views: 109

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 371401

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>

Upvotes: 1

MD Ashik
MD Ashik

Reputation: 9835

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>

Upvotes: 1

Lucas Villanueva
Lucas Villanueva

Reputation: 21

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

Upvotes: 2

Dhawal M
Dhawal M

Reputation: 186

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.

Upvotes: 3

Related Questions