position-try-005.html (1775B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 4 <link rel="author" href="mailto:jkew@mozilla.com"> 5 <link rel="match" href="position-try-005-ref.html"> 6 7 <style> 8 .cb { 9 position: relative; 10 width: 250px; 11 height: 100px; 12 background: yellow; 13 } 14 .anchor { 15 position: relative; 16 anchor-name: --a; 17 top: 25px; 18 left: 50px; 19 width: 50px; 20 height: 50px; 21 background: blue; 22 } 23 .target { 24 position: absolute; 25 position-try-fallbacks: --f1, --f2, --f3, --f4; 26 width: 140px; 27 margin: 10px; 28 background: #0004; 29 /* Position to the right of the anchor. */ 30 left: anchor(--a right); 31 top: anchor(--a top); 32 } 33 /* fallback positions with various widths, none of which actually fit */ 34 @position-try --f1 { 35 inset: auto; 36 /* Position to the left of the anchor. */ 37 right: anchor(--a left); 38 top: anchor(--a top); 39 width: 300px; 40 } 41 @position-try --f2 { 42 inset: auto; 43 /* Position to the bottom of the anchor. */ 44 left: anchor(--a left); 45 top: anchor(--a bottom); 46 width: 250px; 47 } 48 @position-try --f3 { 49 inset: auto; 50 /* Position to the top of the anchor. */ 51 left: anchor(--a left); 52 bottom: anchor(--a top); 53 width: 150px; 54 } 55 @position-try --f4 { 56 inset: auto; 57 /* Position to the right of the anchor, with a larger width. */ 58 left: anchor(--a right); 59 top: anchor(--a top); 60 width: 200px; 61 } 62 </style> 63 <body> 64 <!-- None of the fallback rules fit. The base style is used. --> 65 <div class="cb"> 66 <div class="anchor"></div> 67 <!-- target element includes wrapped text, to check that its content is reflowed appropriately for the chosen position --> 68 <div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div> 69 </div> 70 </body>