position-visibility-no-overflow.html (927B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Anchor Positioning Test: position-visibility: no-overflow</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility"> 5 <link rel="match" href="position-visibility-no-overflow-ref.html"> 6 <style> 7 #container { 8 position: relative; 9 width: 400px; 10 height: 150px; 11 } 12 13 .anchor { 14 width: 100px; 15 height: 100px; 16 background: orange; 17 display: inline-block; 18 } 19 20 .target { 21 position: absolute; 22 position-visibility: no-overflow; 23 position-area: block-end; 24 width: 100px; 25 height: 100px; 26 background: red; 27 top: 0; 28 left: 0; 29 } 30 </style> 31 32 <div id="container"> 33 <!-- #target1 should not be visible because it overflows the containing block. --> 34 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 35 <div id="target1" class="target" style="position-anchor: --a1;">target1</div> 36 </div>