abspos-breaking-dynamic-005.html (774B)
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 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <style> 6 7 #multicol { 8 columns: 3; 9 column-fill: auto; 10 column-gap: 15px; 11 height: 150px; 12 width: 300px; 13 background: yellow; 14 } 15 16 #relpos { 17 position: relative; 18 background: aqua; 19 height: 250px; 20 } 21 22 #abspos { 23 position: absolute; 24 top: 80px; 25 right: 0; 26 height: 80px; 27 width: 50px; 28 background: blue; 29 } 30 31 </style> 32 33 <div id="multicol"> 34 <div id="relpos"> 35 <div id="abspos"></div> 36 </div> 37 </div> 38 39 <script> 40 var mc = document.getElementById("multicol"); 41 mc.offsetHeight; // flush layout 42 mc.style.height = "auto"; 43 44 </script>