The Basics of Anchor Positioning

"When learning CSS, you most likely came across the position property and how to position an element outside of its normal flow. While this works, it has limitations: We can't position the child element relative to anything other than its parent. If the child is set to position: relative (for example, to adjust its z-index), we can't position it relative to an outer parent. You might need to restructure the HTML, which is not ideal."

"In CSS, we can now position an element relative to another element, regardless if it's a parent or not. First, we need to define the anchor element. In our case, it's the card thumbnail wrapper. Next, we can reference that anchor for the category tag. Now that the anchor is defined, we can use the inset properties to position the category tag. Now, wherever the anchor element"

Traditional CSS positioning ties an absolutely positioned element to its nearest positioned ancestor, limiting placement relative to non-parent elements and complicating layouts. This constraint makes shifting components—such as placing a category tag over a thumbnail that later moves in a responsive layout—fragile and prone to breakage when sizes or gaps change. Anchor positioning allows defining an anchor element and then positioning another element relative to that anchor using inset properties. Defining the thumbnail wrapper as an anchor enables the category tag to be reliably placed at specific corners regardless of DOM structure or layout changes, eliminating hacks and HTML restructuring.

Read at Ishadeed