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!