/* Anchor */
.anchor {
  anchor-name: --myAnchor;
}

/* Anchor content */
.anchor-content {
  position: fixed;
  position-anchor: --myAnchor;
  right: anchor(left);
  bottom: anchor(top);
}

/* popover */
.anchor-popover {
  anchor-name: --myPopoverAnchor;
}

/* Anchor content */
.anchor-popover-content {
  position: fixed;
  position-anchor: --myPopoverAnchor;
  inset-area: bottom right;
}

/* style */
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.anchor,
.anchor-popover {
  width: 20px;
  height: 20px;
  /*   border-radius: 50%; */
}

.anchor-content,
.anchor-popover-content {
  border: 1px solid black;
  padding: 5px 10px;
  margin: 0;
  /*   border-radius: 10px; */
}