How to make an image position: relative ?

<div class="flex-container"> 
   <div class="flex-item-div">
      <div class="img-container book-cover"> 
          <img id="makeMeRelative" src="img/GenCherry.png" /> 
          <div class="sticker">
                 <p >buy</p>
          </div> 
       </div>
   </div>
</div>

#makeMeRelative {
     position: relative;
}

.sticker {
   position: absolute;
}

You are close, you just need to make the image itself relative. Absolute positioned items defer to the closest parent that is relative. So if the image tag had no position on it, it would then look at .img-container and if that didn't than it would look at flex-item-div...all the way up and default to body if nothing had relative positioning.

Maybe I'm missing something but, it does work... I replaced the img tag with a div just so you could see the box but, here it is in a codepen

http://codepen.io/enuber/pen/qNJqyX

You just use Top, Left, Right, Bottom to position the word Buy anywhere you want.

Hi Erik Thanks for that and yes it totally does work as expected with divs, but when I use img, changing

 <div id="makeMeRelative">  

to

<img src="example" id="makeMeRelative"> 

  <div class="flex-container"> 
            <div class="flex-item-div">
                <div class="img-container book-cover"> 
                    <img src="img/how-to-cover.png" id="makeMeRelative" /> 
                    <img src="img/amazon_buy.png" class="sticker">

              </div> 
           </div>
       </div>

it doesn't work and uses the body as its relative parent?

Didn't realize that wouldn't work. I modified it. Idea is this

<div id="imRelative">
   <img id="noPositionNeeded">
   <p id="absoluteMePlease">
<div>

#imRelative { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

#absoluteMePlease { 
   position: absolute; 
   top: 100px; 
   left: 20px; 
}

Here is the updated codepen with an image. Should have done that originally but didn't know how to get an image to show up in codepen. Figured it out.

http://codepen.io/anon/pen/

Thanks for that unfortunately the codepen is '404 page not found' but I have tried this way before and and yes the the absolute child works with the relative parent div but the image is not the same size as div? My first message didn't have the all the html/csss as I thought there would be a quick solution, here it is...

  <div class="flex-container">
            <div class="flex-item">
                <img src="img/book-cover.png" class="book-cover">
                <img src="img/buy-sticker.png" class="sticker">  
            </div>
        </div>

.flex-container {
    display: flex;
}

.flex-item {
        position: relative;
        text-align: center;    
}

.book-cover {
    width: 50%;
}

.sticker {
    position: absolute;
    top: 0px;
    right: 0;    
}

As this is for a responsive design the flex-item and images are changing size, the sticker needs to have the book-cover as its relative parent in order to stick to it Thanks for the help

yes like this , It sort of works, I've actually got a mock up of the website up at www.eskimopeach.com if you check out the home page you'll be able to see the problem especially when the flex-direction changes from row to column

.flex-container {
    display: flex;
}

.flex-item {
        position: relative;
        text-align: center;  
        width: 50%
}

.book-cover {
    width: 50%;
}

.sticker {
    position: absolute;
    width: 20%;
    top: 80%;
    right: 15%;    
}

played with your code...

You need to set either .book-cover and/or img-container (you don't need both as far as i can tell) to a specific width. Say 300px. then create a left of a relative amount

.img-container {
    text-align: center;
    width: 300px;
    left: 17%;
}

This will allow the sticker class to have a place to actually attach to

.sticker {
   top: 420px;
  left: 270px
}

This however causes other problems with text flowing around things. That will also have to be addressed.