Check out this example of a CSS tooltip. The author has positioned the tooltip relatively.
.tooltip{
display: inline;
position: relative;
}
However, in this guide, it explains,
Relative. This type of positioning can be confusing and often misunderstood. It essentially means "relative to itself". If you set position: relative; on an element without any other positioning attributes (top, left, bottom or right), it will have no effect on its position, remaining exactly as if it were static. But if you add another positioning attribute like top: 10px;, it will move the element 10 pixels down from where it would normally be. This ability to shift an element based on its regular position is quite useful for aligning elements effectively.
Setting position: relative; also enables the use of z-index on that element, something that doesn't work with statically positioned elements. Even without setting a z-index value, the relatively positioned element will appear above any statically positioned element. Additionally, it confines absolutely positioned child elements within that block. This opens up some powerful styling options as discussed here.
My understanding is that without additional modifiers like top, left, etc., relative behaves like static and flows with the page. So, why does the tooltip appear correctly positioned above the hyperlink? Shouldn't it just show up at the end of the page instead?