CSS :popover-open playground

Explore :popover-open with a native popover. Toggle a positioning block that only applies while the popover is showing.

HTML

<div class="popover-demo">
  <button popovertarget="popover-card">
    Open popover
  </button>

  <div id="popover-card" popover>
    Native popover
  </div>
</div>

CSS

.popover-demo [popover]:popover-open {
  inline-size: 200px;
  block-size: 100px;
  position: absolute;
  inset: unset;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  margin: 0;
}