Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

Igor Pavlenko
Igor Pavlenko
12,925 Points

positioning issue

hi when i set the postion of the icon-location to absolute it places the image inside the feat image ? why this is happening ?

thank you

<div class="primary col"> <h2>Great food</h2> <figure class="figure"> <img class="icon-location" src="img/city-logo.svg" alt="location"> <img class="feat-img" src="img/treats.svg" alt="Drinks and eats"> <figcaption class="figcaption">
<h4> Featured Drinks & Eats</h4> Croisant macaron and stuff. </figcaption> </figure>

.figure { margin: 0; line-height: 0; position: relative; }

.figcaption{ font-size: .75em; line-height: 1; color: #fff; padding: 1em; background: #E7EBEE;

position: absolute;
bottom: 0; /* this will postion the figure in the bottom of the parent figure element */
width: 100%; /* will make sure that the element is as wide as the parent element (figure in this case) */


.icon-location { width: 35px; position: absolute; top: -50; right: -50; }

2 Answers

Michael Lambert
Michael Lambert
6,286 Points


it's because you haven't specified the Measurement Unit after the numbers. You need to add 'px' at the end.

You have

.icon-location { width: 35px; position: absolute; top: -50; right: -50; }

Instead of

.icon-location { width: 35px; position: absolute; top: -50px; right: -50px; }
Igor Pavlenko
Igor Pavlenko
12,925 Points

its always something small ThnX!!!!