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! While you're at it, check out some resources Treehouse students have shared here.
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 trialIgor Pavlenko
12,925 Pointspositioning 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
6,286 PointsHia,
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
12,925 Pointsits always something small ThnX!!!!