Search code examples
htmlcsspopover

How to position a popover in css

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#products-list:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  margin: 0;
}

.parent {
  position: relative;
}
<nav>
  <ul class="container">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <div class="parent">
        <button class="trigger-btn" type="button" popovertarget="products-list">Products</button>
        <div id="products-list" popover>
          <ul>
            <li>Prod1</li>
            <li>Prod1</li>
            <li>Prod1</li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

I'm learning the new Popover api

I want to build a dropdown nav using the new popover api, so I wrote the above demo, current behavior is the popover is in the left of the page, I want to put it under the products button

enter image description here

I tried to override :popover-open css, but don't know why the position: absolute doesn't work, it should be in the parent box.

Solution

  • Anchor positioning is coming, but the only major browser with support for it is Chrome, and as it is considered an experimental feature, you have to use a flag to switch it on.

    Until anchor positioning is widely available, popovers created with the Popover API can only be positioned relative to the viewport (by default they are in the centre).