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

GoldSpec Digital
GoldSpec Digital
4,185 Points

Absolute positioning

So,

In this video when Guil sets the position of the fig-caption to absolute, it moves outside of the box and takes up full width - why is this?

i don't understand as no top, right, left, bottom values were set, we just set the position to absolute and that was it?

Robbie Thomas
Robbie Thomas
31,092 Points

This web page explains more about absolute positioning. You got to scroll down a little bit to get the info though.

CSS Position

1 Answer

Steven Parker
Steven Parker
203,728 Points

Initially, changing the position to absolute doesn't move where the element is placed, it just no longer participates in the "flow" of the document. It no longer pushes the next element down, and it's width is no longer constrained by the parent element so it expands to hold its own contents.

This is modified in the next step by establishing the parent as the relative positioning context.

GoldSpec Digital
GoldSpec Digital
4,185 Points

Hi,

Thanks for explaining - that makes sense. However, in the next step when he adds the relative positioning value to its parent container, the fig caption snaps back to the size it was So by adding position relative, has that then placed the fig-caption back into document flow and within its container - hence why its back to size? Because visually looking at the fig-caption, it is set away from the actual image at first.

I hope this makes sense (i'm still new to this sorry)

Steven Parker
Steven Parker
203,728 Points

You can tell that it is still not part of the flow because it doesn't push anything down (it sits on top).

But giving it a relative context constrains its size.

Check out the links in the Resources section of the course page for more info about position.