anchor-name-005.html (983B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining"> 3 <link rel="author" href="mailto:kiet.ho@apple.com"> 4 <link rel="match" href="reference/anchor-name-005-ref.html"> 5 <meta name="assert" content="An anchor element with multiple anchor names can be referenced using both names"> 6 <style> 7 #anchor { 8 position: relative; 9 top: 10px; 10 left: 10px; 11 12 anchor-name: --a1, --a2; 13 width: 100px; 14 height: 100px; 15 background: red; 16 } 17 #target { 18 position: absolute; 19 /* if this fails, the target (green) box is displayed below the anchor (red) box */ 20 top: anchor(--a1 top); 21 /* if this fails, the target box will not fully cover the anchor box */ 22 left: anchor(--a2 left); 23 24 width: 100px; 25 height: 100px; 26 background: green; 27 z-index: 1; 28 } 29 </style> 30 <body> 31 <p>The test passes if there is only one green square with no red.</p> 32 <div> 33 <div> 34 <div id="anchor"></div> 35 </div> 36 <div id="target"></div> 37 </div> 38 </body>