Dropdown menu in wa-page header appears behind subheader

[DEfusion]

Given the following:

<wa-page>
      <div slot="header">
        <wa-dropdown>
          <wa-button slot="trigger" caret>Dropdown</wa-button>
          <wa-menu>
            <wa-menu-item>Dropdown Item 1</wa-menu-item>
            <wa-menu-item>Dropdown Item 2</wa-menu-item>
            <wa-menu-item>Dropdown Item 3</wa-menu-item>
            <wa-divider></wa-divider>
            <wa-menu-item type="checkbox" checked>Checkbox</wa-menu-item>
            <wa-menu-item disabled>Disabled</wa-menu-item>
            <wa-divider></wa-divider>
            <wa-menu-item>
              Prefix
              <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
            </wa-menu-item>
            <wa-menu-item>
              Suffix Icon
              <wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
            </wa-menu-item>
          </wa-menu>
        </wa-dropdown>
      </div>
      <div slot="subheader">
        <p>I am in the subheader</p>
      </div>
      <main>
           ...
      </main>
    </wa-page>

When you open the dropdown the menu appears behind the subheader because they share the same z-index. I guess in an ideal world wa-dropdown would use popover and then you wouldn't have to worry.

[claviska]

Indeed! Updating the controls to use the Popover API is on our radar. Until then, using the hoist attribute on the dropdown should help!

[DEfusion]

Ah-ha hoist missed that, thanks for the tip.

[DEfusion]

Sadly hoist doesn't seem to help here for some reason, for now I'm overriding the z-index's on the wa-page parts.