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 CSS Layout Basics Positioning Page Content Create an Image Caption with Absolute Positioning

GoldSpec Digital
GoldSpec Digital
4,185 Points
Posted by GoldSpec Digital
GoldSpec Digital
4,185 Points

Absolute positioning

So,

In this video when Guil sets the position of the fig-caption to absolute, it moves outside of the box and takes up full width - why is this?

i don't understand as no top, right, left, bottom values were set, we just set the position to absolute and that was it?

Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

This web page explains more about absolute positioning. You got to scroll down a little bit to get the info though.

CSS Position

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Initially, changing the position to absolute doesn't move where the element is placed, it just no longer participates in the "flow" of the document. It no longer pushes the next element down, and it's width is no longer constrained by the parent element so it expands to hold its own contents.

This is modified in the next step by establishing the parent as the relative positioning context.

GoldSpec Digital
GoldSpec Digital
4,185 Points
GoldSpec Digital
GoldSpec Digital
4,185 Points

Hi,

Thanks for explaining - that makes sense. However, in the next step when he adds the relative positioning value to its parent container, the fig caption snaps back to the size it was So by adding position relative, has that then placed the fig-caption back into document flow and within its container - hence why its back to size? Because visually looking at the fig-caption, it is set away from the actual image at first.

I hope this makes sense (i'm still new to this sorry)

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

You can tell that it is still not part of the flow because it doesn't push anything down (it sits on top).

But giving it a relative context constrains its size.

Check out the links in the Resources section of the course page for more info about position.