abspos-breaking-dynamic-003.html (799B)
1 <!DOCTYPE HTML> 2 <title>Test for dynamic re-pagination of absolutely positioned elements</title> 3 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 4 <style> 5 6 #multicol { 7 columns: 3; 8 column-fill: auto; 9 column-gap: 15px; 10 height: 500px; 11 width: 300px; 12 background: yellow; 13 } 14 15 #relpos { 16 position: relative; 17 background: aqua; 18 height: 250px; 19 } 20 21 #abspos { 22 position: absolute; 23 top: 60px; 24 right: 0; 25 height: 80px; 26 width: 50px; 27 background: blue; 28 } 29 30 #overflow { 31 height: 100px; 32 width: 30px; 33 background: grey; 34 } 35 </style> 36 37 <div id="multicol"> 38 <div id="relpos"> 39 <div id="abspos"><div id="overflow"></div></div> 40 </div> 41 </div> 42 43 <script> 44 45 var mc = document.getElementById("multicol"); 46 mc.offsetHeight; // flush layout 47 mc.style.height = "140px"; 48 49 </script>