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 trial

CSS

Posted by AaronDavid Hammond
AaronDavid Hammond
6,303 Points

Is a relative position a one time per page use?

I just finished the CSS Positioning course with Guil and am trying to wrap my head around one of the concepts presented. In using the position: relative/absolute, let's say instead of having one caption overlap an image I have three captions that need to overlap three separate images. Could I only set the relative position once on the page and have to do the math to correctly position the other absolute captions? Or is there a way to simplify the math and create a relative/absolute combo per image/caption combo?

1 Answer

Paul Yabsley
Paul Yabsley
46,713 Points

Yeah you can do it per image. Depends on your markup though.

Just remember that position relative gives context to the elements child elements. By default the context for a absolutely positioned element is the body. By setting position relative on an elements parent you make the absolutely position element relative to that.

What does your markup look like?

You could do something like this.

<div class="img-with-caption">
    <img src="/image-path/image1.jpg" alt="image">
    <p class="img-caption">Image caption 1</p>
</div>
<div class="img-with-caption">
    <img src="/image-path/image2.jpg" alt="image">
    <p class="img-caption">Image caption 2</p>
</div>
<div class="img-with-caption">
    <img src="/image-path/image3.jpg" alt="image">
    <p class="img-caption">Image caption 3</p>
</div>

.img-with-caption {
    position: relative;
    /* This means each div will put any absolutely positioned element inside it relative to itself. */
}

.img-caption {
    position: absolute;
    /* Then set the positioning to where you want it */
    bottom: 0;
    left: 0;
    right: 0;
}