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 CSS Layout Techniques Relative and Absolute Positioning

Daniel Green
Daniel Green
1,138 Points
Posted by Daniel Green
Daniel Green
1,138 Points

Figure positioning (relative, margin 0) vs. figcaption positioning

Near the end of this video when we were moving the figcaption from the bottom of the image, why was it necessary to change the positioning of the "figure" itself first (to relative with 0 margin)?

I went back and deleted the "figure" positioning from my CSS doc and it moved the figcaption all the way up to near the top of the page.

I'm confused on why the relative positioning of the figure affected the absolute positioning of the figcaption.

1 Answer

Brian Jensen
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Brian Jensen
Treehouse Teacher
Brian Jensen
.a{fill-rule:evenodd;}techdegree
Brian Jensen
Treehouse Teacher

Great question Daniel Green! When using position: absolute; on an element, by default it aligns it self with the top most html element, if none of its ancestor elements have position: relative; applied. Once position: relative; is applied to the <figure> element, which is the closest ancestor to the <figcaption> element, its position will be relative to that ancestor.