Absolute positioning anchors a box against one of its ancestor elements. You often use it to position an element in some corner or along some edge of its parent. For example, a close button that sits in the top-right corner of an image is likely absolutely positioned.
Suppose you have a parent element with some text and a child div:
What happens when you absolutely position the child?
As with fixed positioning, an absolutely positioned element vacates its place in the static flow. The parent element's height shrinks accordingly. The child's box doesn't have any of its edge properties set, so the edge locations are pulled from the static box.
What will happen if you set the child's right property to 0?
Earlier you read that absolute positioning anchors a child element to its ancestor, but this child appears to be anchored to the browser's viewport instead of its parent. That's because an absolutely positioned element is anchored against its nearest non-static ancestor. This parent is statically positioned, so the browser ascends the hierarchy looking for non-static ancestors. If none are found, the viewport serves as the anchor, as you see here. In the absence of a non-static ancestor, absolute positionining behaves the same as fixed positioning.
To anchor the child against its own parent, you have a few choices. You could give the parent absolute or fixed positioning, but this will take the parent out of the static flow and anchor it against some other box. If you want the parent to stay where it's at, you give it relative positioning but do not set any of its edge properties:
Now the child is anchored against the parent's right edge. Its other edges are still taken from its static box. If you want the child to appear completely below the parent, you can set its top to 100%:
Try adjusting the child's properties so it's positioned inside the top-right corner of the parent. Try positioning it outside the top-right corner.
To make the child rest along the bottom of its parent, you can set its left and right properties:
With both edges anchored, the child's width property is redundant and is therefore removed.