JSFiddle - React, Tailwind, and code Playground

by dandclark_msft

HTML

<!DOCTYPE html>
<style>
  #container {
     overflow: scroll;
     position: relative;
     width: 400px;
     height: 400px;
  }
  #anchor {
    anchor-name:--a;
    margin-left: 100px;
    width: 50px;
    height: 50px;
    background: hotpink;
  }
  #anchored {
    display: none;
    position: absolute;
    position-anchor: --a;
    position-area: bottom;
    position-try-fallbacks: flip-block;
    position-try-order: most-height;
    width: 100px;
    height: 50%;
    box-sizing: border-box;
    border: solid;
    background: cyan;
  }
</style>
<div id="container">
  <div style="height:500px;"></div>
  <div id="anchor"></div>
  <div id="anchored"></div>
  <div style="height:1000px;"></div>
</div>
<script>
  anchor.onclick = function() {
    let s = anchored.style
    s.display = s.display == "block" ? "none" : "block";
  }
</script>