Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Andrew Dickens
Andrew Dickens
18,352 Points

How to make an image position: relative ?

I have an image sitting in image-container inside a flex-container, I want to put a sticker on it, the sticker needs to have an absolute position with the image not with the image-container. how can i do this?

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

7 Answers

Erik Nuber
Erik Nuber
20,629 Points
<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.

Andrew Dickens
Andrew Dickens
18,352 Points

Nice Idea Erik, I have tried that and the sticker still uses the body as its relative parent(because it is) So i guess the question is how to make the img tag the parent?

Erik Nuber
Erik Nuber
20,629 Points

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.

Andrew Dickens
Andrew Dickens
18,352 Points

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?

Erik Nuber
Erik Nuber
20,629 Points

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/

Andrew Dickens
Andrew Dickens
18,352 Points

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

Erik Nuber
Erik Nuber
20,629 Points

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

Will take a look...have an appointment I have to leave for but when I get back I will look. Should still be similar. need to add a width to the .flex-item.

Andrew Dickens
Andrew Dickens
18,352 Points

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%;    
}
Erik Nuber
Erik Nuber
20,629 Points

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.