<!DOCTYPE html>
<meta charset="utf-8">
<link rel=author title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel=help href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md">
<link rel=match href="popup-open-overflow-display-ref.tentative.html">

<div id=container>
  <popup id=p1>This is popup 1<div id=anchor2></div></popup>
  <popup id=p2 anchor=anchor2>This is popup 2<div id=anchor3></div></popup>
  <popup id=p3 anchor=anchor3>This is popup 3</popup>
</div>

<style>
  #container {
    overflow:hidden;
    position: absolute;
    top: 100px;
    left: 50px;
    width: 30px;
    height: 30px;
  }
  popup#p2 {
    position: absolute;
    top: 100px;
  }
  popup#p3 {
    position: relative;
    top:200px;
  }
  popup {
    width: fit-content;
    height: fit-content;
    border: 1px solid;
    padding: 1em;
    background: white;
    color: black;
  }
</style>

<script>
  document.querySelector('#p1').show();
  document.querySelector('#p2').show();
  document.querySelector('#p3').show();
</script>