Overlaying a <div> with text

Question

I need to be able to display price tags on a div.

like this

I am sure it's something to do with z index and positioning.

Answer 1

maybe you could rethink your structure and use the flex properties.

You could something of that kind see snippet below (or breakable into 2 rows of three)

div {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1em 3em;
  background: tomato;
}
figure {
  position: relative;
  display: table;
  height: 50px;
  width: 100px;
  margin: 2em;
}
figure img {
  position: absolute;
  transform:rotate(-10deg);
}
figcaption {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  color: white;
  position: relative;
}

<div>
  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>

  <figure>
    <img src="http://dummyimage.com/100x50/555/555">
    <figcaption>
      200€</figcaption>
  </figure>
</div>

think: witout CSS i must be able to understand what it is about ... you did separate image and price, not a really good idea ;)