You know those modal dialogs that have a close button hanging off the top-right corner? There’s a few steps needed to do it right, but it might be easier now with CSS Anchor Positioning.
I wrote a post exploring it:
https://www.darins.page/articles/close-button-hang-dialog
@darin what if we need add dialog open animation with transforms? Fixed position should be broken in this screnario.
@monochromer I believe that's due to an issue with anchor positioning not working correctly when the 'transform' property is set on the anchor element.
But looks like Chrome is shipping a fix for that soon, from what I can tell here: https://chromestatus.com/feature/5201048700583936
@monochromer I dug into this more, and apparently it is not a bug but rather intended behavior.
The dialog and close button have a parent-child relationship, which still allows anchor positioning to function. But if the parent gets a property that creates a new containing block inside it (like 'transform' or 'position: relative'), the containing block will sever the anchor connection between the parent and child. If the two elements were siblings it wouldn't be an issue.
I was able to create a workaround by making the close button a popover ('popover=manual') – something recommended to me by @mayank in a previous post on here.
Then when the dialog opens I use some JS to also open the close button popover (since there's no way to currently auto-open a popover). That allows the transition to now work, see the demo here: https://codepen.io/dsenneff/pen/wBGbavB/6cac7606d6de0eb1c84e37cf1e181ffb
Now, is all of this worth the hassle? Probably not. I might just continue to use the "old way" now.