anchor-position-multicol-fixed-001.html (2233B)
1 <!DOCTYPE html> 2 <title>Anchors on fixed positioned objects in multicol</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 5 <link rel="author" href="mailto:kojii@chromium.org"> 6 <link rel="author" href="mailto:mstensho@chromium.org"> 7 <link rel="match" href="anchor-position-multicol-fixed-001-ref.html"> 8 <style> 9 .transform { 10 transform: translate(0); 11 } 12 .columns { 13 columns: 2; 14 column-fill: auto; 15 column-gap: 10px; 16 width: 210px; 17 height: 50px; 18 } 19 .colspan { 20 column-span: all; 21 } 22 .spacer { 23 height: 10px; 24 } 25 .anchor1 { 26 anchor-name: --a1; 27 margin-left: 10px; 28 width: 40px; 29 height: 10px; 30 } 31 .anchor2 { 32 anchor-name: --a1; 33 position: fixed; 34 left: 20px; 35 top: 20px; 36 width: 20px; 37 height: 30px; 38 } 39 .target { 40 position: absolute; 41 left: anchor(--a1 left); 42 top: anchor(--a1 top); 43 width: anchor-size(--a1 width); 44 height: anchor-size(--a1 height); 45 } 46 .target::before { 47 position: absolute; 48 content: ""; 49 background: green; 50 } 51 .target.inside::before { 52 width: 100%; 53 height: 50%; 54 } 55 .target.inside.part2::before { 56 top: 50%; 57 } 58 .target.outside::before { 59 width: calc(50% - 20px); 60 height: 100%; 61 } 62 .target.outside.part1::before { 63 left: 20px; 64 } 65 .target.outside.part2::before { 66 right: 20px; 67 } 68 </style> 69 <p>There should be a green rectangle below, no red.</p> 70 <div class="transform"> 71 <div style="height:10px;"></div> 72 <div style="position:absolute; z-index:-1; left:20px; width:130px; height:50px; background:red;"></div> 73 <div class="columns"> 74 <div class="transform"> 75 <div style="margin-left:20px; width:20px; height:20px; background:green;"></div> 76 <div class="transform"> 77 <div style="margin-left:20px; width:20px; height:20px; background:green;"></div> 78 <div class="anchor1"></div> 79 <div class="anchor2"></div> 80 <div style="height:20px;"></div> 81 <div style="margin-left:20px; width:20px; height:30px; background:green;"></div> 82 <div class="target inside part1"></div> 83 </div> 84 <div class="target inside part2"></div> 85 </div> 86 <div class="target outside part1"></div> 87 </div> 88 <div class="target outside part2"></div> 89 </div>