abspos-breaking-dynamic-002-ref.html (739B)
1 <!DOCTYPE HTML> 2 <title>Test for dynamic re-pagination of absolutely positioned elements</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <style> 5 6 #multicol { 7 height: 150px; 8 width: 300px; 9 background: yellow; 10 position: relative; 11 } 12 13 #relpos { 14 position: absolute; 15 background: aqua; 16 height: 150px; 17 width: 90px; 18 top: 0; 19 left: 0; 20 } 21 22 #abspos { 23 position: absolute; 24 right: 0; 25 height: 80px; 26 width: 50px; 27 background: blue; 28 } 29 30 </style> 31 32 <div id="multicol"> 33 <div id="relpos" style="left: 0"> 34 <div id="abspos" style="top: 80px; height: 70px"></div> 35 </div> 36 <div id="relpos" style="left: 105px; height: 100px;"> 37 <div id="abspos" style="top: 0px; height: 10px"></div> 38 </div> 39 </div>