Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Ryan Rassoli
Ryan Rassoli
3,365 Points

Caption Positioning

In this video Guil set the picture to relative and the caption to absolute. I thought it would make more sense to set the picture to absolute and have the caption relative to the picture and set the bottom element to 0. Could someone explain why I am wrong?

1 Answer

Thomas McAdoo
Thomas McAdoo
4,141 Points

Guil did not actually position the img itself, he positions the <figure> to relative. If he had positioned the figure to absolute, and if the <figure>'s container itself didn't have an position attribute added to it as well, it will go to the body. Which in return would cause it to scroll along the page with the body.

W3S:

position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

So basically, in order for him to set the picture or the figure to absolute he would have to go back and change/add things unnecessarily when he could just set <figure> to relative.

Hope this helps!