Popover-API über Navigations-Tag bei Verwendung von Foundation ⇐ HTML

[Anonymous]

Das folgende CSS wird verwendet, um ein Popover mithilfe der HTML-API zu positionieren

Code: Select all

[popovertarget='popover_nav']{
anchor-name: --popover_nav;
}
#popover_nav {
top: anchor( --popover_nav bottom );
left: anchor( popover_nav right );
translate: -50% 0;
}
[popover]{
padding: .5rem 1 rem;
border-radius: 0.5rem;
&:popover-open {
display: grid;
gap: 0.2rem;
box-shadow: 0 2px 10px rgba( 0,0,0,0.07 );
}
&::backdrop {
background: rgba( 0,0,0,0.07 );
}
}

.head_nav {
width: 100%;
color: var(--main-font-color-reversed);
background: rgba(24,37,61,1);
border-bottom: 1px solid rgba(182,193,204,0.5);
height: 79px;
position: fixed;
top: 0;
}

Es wird jedoch innerhalb eines Navigations-Tags aufgerufen, wobei das von Foundation festgelegte Raster verwendet wird;

Code: Select all

open popover!


popover Nav

1

2

3

4

5

6

7

8

9


close

Daher ist die Positionierung relativ zu der Zelle, in die es eingefügt wird, aber nicht zur Zelle selbst.

Das Platzieren des besagten Codes nach dem öffnenden Body-Tag und vor dem Nav-Tag führt dazu, dass er ausgeblendet wird (das div-Tag deckt ihn ab).
Wie können sowohl die Schaltfläche als auch Popover relativ zum Body-Tag positioniert werden (die Schaltfläche soll oben links im Ansichtsfenster positioniert bleiben) ?