position-visibility-no-overflow-stacked-child.html (1339B)
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 31 #child { 32 position: absolute; 33 /* stacking context */ 34 z-index: 1; 35 top: -100px; 36 left: 100px; 37 width: 100px; 38 height: 100px; 39 background: maroon; 40 } 41 42 #grandchild { 43 position: absolute; 44 z-index: 1; 45 top: 0px; 46 left: 100px; 47 width: 50px; 48 height: 50px; 49 background: pink; 50 } 51 </style> 52 53 <div id="container"> 54 <!-- #target1 should not be visible because it overflows the containing block. --> 55 <div class="anchor" style="anchor-name: --a1;">anchor1</div> 56 <div id="target1" class="target" style="position-anchor: --a1;">target1 57 <div id="child">Child 58 <div id="grandchild">Grand child</div> 59 </div> 60 </div> 61 </div>