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

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

The figure element was positioned relative to what? The position didn't change at all so how does this work?

We positioned the figure element relative, in order to be able to use the absolute positioning on the figcaption element. It was relative to what, the div with the class "primary"?

Travis Sweeney
Travis Sweeney
10,973 Points

When using absolute positioning on an element, that position is relative to the next parent element with its position set to relative. If no parents are set to relative position, than the absolute positioning will be relative to the body. So to answer your question of what the figure element's position is relative to, it's actually relative to itself. But by declaring its position as relative, you allow its child elements (the figcaption element) to be positioned in relation to the figure element.

To get a good idea of why this relative positioning is important on the parent element, try removing that style from your css and then observe how it affects the absolute positioning on figcaption.

1 Answer

Arikaturika Tumojenko
Arikaturika Tumojenko
8,897 Points

What do you mean by the next parent element? You don't mean the parent element? Now I understand better how positioning works, thx for the reply :).

Travis Sweeney
Travis Sweeney
10,973 Points

Happy to help :)

And in this case, it is the direct parent element that is controlling its position. But if you were working with an element that was nested several layers deep, the absolute positioning effect would move up through the elements to check for the first one positioned relative if the direct parent was not. That's what I meant by next parent element. Sorry if that was confusing. I'm still learning myself, and trying to explain these things to someone else helps me better understand them myself. Unfortunately though, I'm still working on the best ways to articulate the information. :)