abspos-breaking-dynamic-001.html (705B)
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 columns: 3; 8 column-fill: auto; 9 column-gap: 15px; 10 height: 150px; 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: 80px; 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"> 34 <div id="abspos"></div> 35 </div> 36 </div> 37 38 <script> 39 40 var mc = document.getElementById("multicol"); 41 mc.offsetHeight; // flush layout 42 mc.style.height = "100px"; 43 44 </script>