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

Hia,

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!!!!