Popover API поверх тега навигации при использовании основы ⇐ Html

[Anonymous]

Следующий CSS-код используется для размещения всплывающего окна с помощью HTML API

Код: Выделить всё

[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;
}

Однако он вызывается внутри тега навигации с использованием сетки, установленной Foundation;

Код: Выделить всё

open popover!


popover Nav

1

2

3

4

5

6

7

8

9


close

В результате позиционирование происходит относительно ячейки, в которую он вставлен, а не самой по себе.

Размещение указанного кода после открывающего тега body и перед тегом nav приводит к его скрытию (тег div закрывает его).
Как можно обе кнопки и всплывающее окно должно быть расположено относительно тега body (кнопка должна оставаться в левом верхнем углу области просмотра)?

Подробнее здесь: https://stackoverflow.com/questions/798 ... foundation