position-visibility-anchors-visible-in-overflow-ref.html (1272B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <style> 4 #outer-container { 5 width: 100px; 6 height: 100px; 7 overflow: visible; 8 position: relative; 9 } 10 #inner-container { 11 width: 100px; 12 height: 100px; 13 overflow: visible; 14 position: relative; 15 } 16 #anchor { 17 anchor-name: --anchor; 18 position: relative; 19 margin-left: 200px; 20 width: 100px; 21 height: 100px; 22 background: orange; 23 } 24 #spacer { 25 height: 200px; 26 } 27 #target-a { 28 position-anchor: --anchor; 29 position-visibility: anchors-visible; 30 position-area: top left; 31 width: 50px; 32 height: 50px; 33 background: green; 34 position: absolute; 35 inset: 0; 36 } 37 #target-b { 38 position-anchor: --anchor; 39 position-visibility: anchors-visible; 40 position-area: center left; 41 width: 50px; 42 height: 50px; 43 background: green; 44 position: absolute; 45 inset: 0; 46 } 47 #target-c { 48 position-anchor: --anchor; 49 position-visibility: anchors-visible; 50 position-area: bottom left; 51 width: 50px; 52 height: 50px; 53 background: green; 54 position: absolute; 55 inset: 0; 56 } 57 </style> 58 59 <div id="spacer"></div> 60 <div id="anchor">anchor</div> 61 <div id="target-a">target-a</div> 62 <div id="target-b">target-b</div> 63 <div id="target-c">target-c</div>