The following CSS is used to position a popover, using the 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;
}

However it is being invoked within a nav tag, using the grid set by Foundation;

As a result, the positioning is relative to the cell in which it is inserted, but not the itself. Placing said code after the opening body tag and before the nav tag is resulting in it being hidden (the div tag covers it).

How can both the button and popover be positioned relative to the body tag (the button is to remain positioned top-left of the viewport) ?