An absolute element's containing block is its nearest non-static ancestor. position: relative is a common way to define a containing block.
Grandparent
position: relative
Parent
No position specified
(default:
No position specified
(default:
position: static)
Child
position: absolute
Grandparent
position: relative
Parent
(Defines containing block)
position: relative(Defines containing block)
Child
position: absolute
An in-flow (position is static, relative, or sticky) element's containing block is its nearest block-level ancestor (including inline-block). The containing block defines relative units.
Snoot?
Containing block!
Boop!
div (block)
width: 100%
Snoot?
Not a containing block.
Boop!
span (inline)
width: 100%
Snoot?
Containing block!
Boop!
spandisplay: inline-block
width: 100%
An in-flow (static, relative, or sticky) element's containing block includes only the content box, excluding padding. An absolute element's containing block contains the content and padding boxes.
This is the parent content.
position: relative; width 100%
Doggo ipsum big bork and boop da snoot
This is the parent content.
position: absolute, width: 100%
Doggo ipsum big bork and boop da snoot