position-anchor-ref.html (684B)
1 <!DOCTYPE html> 2 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 3 <style> 4 .anchor { 5 width: 100px; 6 height: 100px; 7 background: orange; 8 font: 20px/1 Ahem; 9 } 10 11 .target { 12 position: fixed; 13 background: lime; 14 width: 100px; 15 height: 100px; 16 font: 20px/1 Ahem; 17 } 18 19 body { 20 margin: 0; 21 } 22 23 #anchor1 { 24 margin-left: 100px; 25 } 26 27 #target1 { 28 left: 100px; 29 top: 100px; 30 } 31 32 #anchor2 { 33 margin-left: 300px; 34 margin-top: 100px; 35 } 36 37 #target2 { 38 left: 300px; 39 top: 300px; 40 } 41 </style> 42 43 <div id="anchor1" class="anchor">anchor1</div> 44 <div id="anchor2" class="anchor">anchor2</div> 45 46 <div id="target1" class="target">target1</div> 47 <div id="target2" class="target">target2</div>