abspos-breaking-dynamic-003-ref.html (926B)
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: 140px; 8 width: 300px; 9 background: yellow; 10 position: relative; 11 } 12 13 #relpos { 14 position: absolute; 15 background: aqua; 16 height: 140px; 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 #overflow { 31 position: absolute; 32 width: 30px; 33 background: grey; 34 } 35 36 </style> 37 38 <div id="multicol"> 39 <div id="relpos" style="left: 0"> 40 <div id="abspos" style="top: 60px; height: 80px"> 41 <div id="overflow" style="height: 80px"></div> 42 </div> 43 </div> 44 <div id="relpos" style="left: 105px; height: 110px;"> 45 <div id="abspos" style="top: 0px; height: 0px"> 46 <div id="overflow" style="height: 20px"></div> 47 </div> 48 </div> 49 </div>