Email or username:

Password:

Forgot your password?
Vadim Makeev

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.

codepen.io/pepelsbey/pen/PoMQE

CodePen demo in Chrome: popover is positioned in the top left corner of the page for both buttons.
CodePen demo in Firefox: popover is positioned right under the button that triggered it.
CodePen demo in Safari: popover is positioned right under the button that triggered it.
9 comments
Corpses Will rots 🎃

@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.

Vadim Makeev

@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.

Vadim Makeev

@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 hidde.blog/positioning-anchore
2 mastodon.social/@pepelsbey/113

Hidde

@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

Vadim Makeev

@hdv Thanks! I think this is one of the things that hasn’t been thought through enough and started to surface in independent implementations.

Hidde

@pepelsbey it's been talked about for a bit… 

I think these maybe the first implementations of popover as an implicit anchor element drafts.csswg.org/css-anchor-po

which I believe is added to HTML here github.com/whatwg/html/pull/91

Bramus

@pepelsbey @argyleink I’ll ask around internally what should happen here.

Adam Argyle

@bramus @pepelsbey him and I are in chats tryin to uncover what's up!

Go Up