anchor-center-visibility-change-ref.html (821B)
1 <!DOCTYPE html> 2 <style> 3 .container { 4 width: 100px; 5 height: 100px; 6 border: solid 3px; 7 position: relative; 8 margin: 50px; 9 } 10 11 .anchor { 12 position: relative; 13 width: 50px; 14 height: 50px; 15 left: 40px; 16 top: 5px; 17 background: lime; 18 } 19 20 .target-inner { 21 width: 30px; 22 height: 20px; 23 } 24 25 .target { 26 position: absolute; 27 } 28 29 #target-1 { 30 background: cyan; 31 left: 50px; 32 } 33 34 #target-2 { 35 top: 20px; 36 left: 0; 37 background: blue; 38 } 39 40 #target-3 { 41 top: 20px; 42 left: 50px; 43 background: magenta; 44 } 45 46 </style> 47 48 <div class="container"> 49 <div class="anchor"></div> 50 <div id="target-1" class="target"> 51 <div class="target-inner"></div> 52 </div> 53 <div id="target-2" class="target"> 54 <div class="target-inner"></div> 55 </div> 56 <div id="target-3" class="target"> 57 <div class="target-inner"></div> 58 </div> 59 </div>