Let's read a small 'badge' pattern a common UI element and trace exactly how relative and absolute work together.
.wrapper { position: relative; height: 100px; border: 1px solid #ccc; }. This wrapper doesn't visually move anywhere because of position: relative on its own, relative with no top/left/right/bottom does nothing visible. But it now serves a critical, invisible role: it becomes the ANCHOR POINT for any absolutely positioned children inside it.
.badge { position: absolute; top: 8px; right: 8px; ... }. Because this badge is absolutely positioned, it's completely removed from the normal flow the wrapper doesn't reserve any space for it, as if it were invisible to layout. Then, top: 8px and right: 8px position it 8 pixels from the TOP and RIGHT of its nearest positioned ancestor which is exactly the .wrapper div, because that's the closest parent with position: relative set.
If .wrapper did NOT have position: relative, the badge would ignore it completely and instead position itself 8px from the top-right of the entire browser page a very common bug. This relative-parent-plus-absolute-child pattern is exactly how corner badges, notification dots, and tooltips are built across nearly every real website.