"I'm very guilty of telling people that one of the amazing benefits of Anchor Positioning in CSS is that you can position elements relative to other elements regardless of where they are in the DOM. No, Chris, you can't. Sorry about that. There are a bunch of limitations which can feel quite inscrutable at first. New types of problems that, to my knowledge, haven't existed quite like this in CSS before."
"The anchor element must be fully laid out before the element that is anchored to it. So you have to be thinking about the position value quite a bit. There is almost a 100% chance that the element you're trying to position to an anchor is position: absolute;. It's the anchor itself that's more concerning. If they are siblings, and the anchor has any position value other than the default static, the anchor has to come first."
Anchor Positioning in CSS is commonly misrepresented as allowing elements to be positioned relative to others anywhere in the DOM. However, substantial limitations exist that create new types of problems previously unseen in CSS. The anchor element must be fully laid out before the anchored element, requiring strategic DOM placement. When elements are siblings, the anchor must come first if it has any position value other than static. These constraints make the feature prone to errors and unexpected behavior, suggesting the CSS specification should implement solutions like a second pass in anchor resolution to improve usability and reduce mistakes.
Read at Frontendmasters
Unable to calculate read time
Collection
[
|
...
]