anchor-css-zoom-ref.html (1157B)
1 <!DOCTYPE html> 2 3 <style> 4 .containing-block { 5 position: relative; 6 width: 150px; 7 height: 150px; 8 9 zoom: 2; 10 } 11 12 .cell { 13 width: 50px; 14 height: 50px; 15 } 16 17 #anchor-cell { 18 position: absolute; 19 top: 50px; 20 left: 50px; 21 22 background: green; 23 } 24 25 .anchor-positioned-cell { 26 position: absolute; 27 } 28 29 #top-left { 30 top: 0; 31 left: 0; 32 33 background: cyan; 34 } 35 36 #top-right { 37 top: 0; 38 right: 0; 39 40 background: magenta; 41 } 42 43 #bottom-left { 44 bottom: 0; 45 left: 0; 46 47 background: yellow; 48 } 49 50 #bottom-right { 51 bottom: 0; 52 right: 0; 53 54 background: black; 55 } 56 </style> 57 58 <body> 59 <div class="containing-block"> 60 <div class="cell" id="anchor-cell"></div> 61 62 <div class="cell anchor-positioned-cell" id="top-left"></div> 63 <div class="cell anchor-positioned-cell" id="top-right"></div> 64 <div class="cell anchor-positioned-cell" id="bottom-left"></div> 65 <div class="cell anchor-positioned-cell" id="bottom-right"></div> 66 </div> 67 </body>