Any idea who’s right? It would be nice to be able to position a popover right next to the button that triggers it. Firefox and Safari both make it easy. Chrome’s behavior makes me sad.
Any idea who’s right? It would be nice to be able to position a popover right next to the button that triggers it. Firefox and Safari both make it easy. Chrome’s behavior makes me sad. 9 comments
@cwilcox808 It’s normal behavior for absolutely positioned elements to stay at the same place in the flow (but out of the flow) if you don’t specify the inset (top, right, bottom, left). You don’t need position: relative for that. Only if you want to use inset. @hdv Now that I found your article¹ on the topic, what do you think about Firefox’s and Safari’s behavior² that lets you anchor popovers to a button? 1 https://hidde.blog/positioning-anchored-popovers/ @pepelsbey I feel the current Firefox and Safari is a great default, and what I had personally hoped for ever since popover shipped… TBH I am unsure why it works, as this didn't work before, I need to catch up on what's making this work and where we decided, will update my post accordingly too @hdv Thanks! I think this is one of the things that hasn’t been thought through enough and started to surface in independent implementations. @pepelsbey it's been talked about for a bit… I think these maybe the first implementations of popover as an implicit anchor element https://drafts.csswg.org/css-anchor-position-1/#implicit which I believe is added to HTML here https://github.com/whatwg/html/pull/9144 |
@pepelsbey
I don't know what Firefox and Safari's justification is for their choice; it's like they pretending the div has `position: relative`.
Though if you do add that to the div, it doesn't change what Chrome does, like elements in the top layer are not just out of the document flow but totally disconnected from it. Maybe they're rushing to anchor positioning being *the* way to do it.