position-anchor-target-with-children-ref.html (745B)
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 } 9 10 .target { 11 position: fixed; 12 background: lime; 13 width: 100px; 14 height: 100px; 15 } 16 17 body { 18 margin: 0; 19 font: 20px/1 Ahem; 20 } 21 22 #anchor1 { 23 margin-left: 100px; 24 } 25 26 #target1 { 27 left: 100px; 28 top: 100px; 29 } 30 31 #anchor2 { 32 margin-left: 300px; 33 margin-top: 100px; 34 } 35 36 #target2 { 37 left: 300px; 38 top: 300px; 39 } 40 </style> 41 42 <div id="anchor1" class="anchor">anchor1</div> 43 <div id="anchor2" class="anchor">anchor2</div> 44 45 <div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div> 46 <div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div>