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

Ryan Rassoli
Ryan Rassoli
3,365 Points
Posted by 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
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!