Positioning an element relative (or anchored) to anchored-positioned dialog element
Hi,
As stated in the title. I have been trying diverse approaches to position a div (it's essentially a... how is it called? a bubble arrow/pointer?) relative to a dialog element that's opened and connected through the popover API (it's popover target to a button). The dialog is by default [positioned fixed, but I changed that to
The thing is I want an arrow/pointer that points to the dialog from the button and for the life of me I can't make that work. I've tried both positioning absolute the div, but I've also tried anchor-positioning it to the button (I have also tried to use the div as the anchor, didn't work either).
To make it clearer, I paste here a link to the Codepen where I recreated as minimal an example as I could. In that CodePen I also show some of the approaches.
What I'd like to know is, of course to make it work, but also, and even more importantly what am I misunderstanding about how this works?
If I try to position the arrow absolute, it will create overflow (and scroller!) in the div. If I try to place it outside the dialog it won't show (because dialog is on top layer, right?). If I will use anchor positioning, then it will be on the block-center no matter what I try, I can't put it below the div.
It's only my second post here, so please apologize me if smth in this post was wrong. I tried to do what's encouraged in the rules, but pls tell me if smth else is missing. (I didn't include the code here because is maybe a little bit too much and anyway the codepen will allow you to test it, I think, right?)
Appreciate any insight, explanation, pointer, clue, hint, or anything alike.
As stated in the title. I have been trying diverse approaches to position a div (it's essentially a... how is it called? a bubble arrow/pointer?) relative to a dialog element that's opened and connected through the popover API (it's popover target to a button). The dialog is by default [positioned fixed, but I changed that to
position absoluteanchor-positionThe thing is I want an arrow/pointer that points to the dialog from the button and for the life of me I can't make that work. I've tried both positioning absolute the div, but I've also tried anchor-positioning it to the button (I have also tried to use the div as the anchor, didn't work either).
To make it clearer, I paste here a link to the Codepen where I recreated as minimal an example as I could. In that CodePen I also show some of the approaches.
What I'd like to know is, of course to make it work, but also, and even more importantly what am I misunderstanding about how this works?
If I try to position the arrow absolute, it will create overflow (and scroller!) in the div. If I try to place it outside the dialog it won't show (because dialog is on top layer, right?). If I will use anchor positioning, then it will be on the block-center no matter what I try, I can't put it below the div.
It's only my second post here, so please apologize me if smth in this post was wrong. I tried to do what's encouraged in the rules, but pls tell me if smth else is missing. (I didn't include the code here because is maybe a little bit too much and anyway the codepen will allow you to test it, I think, right?)
Appreciate any insight, explanation, pointer, clue, hint, or anything alike.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
