absolute-pos-box-inside-fixed-pos-box-with-changing-height.html (802B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-position/"> 3 <link rel="match" href="absolute-pos-box-inside-fixed-pos-box-with-changing-height-ref.html"> 4 <meta name="assert" content="bottom anchored abs pos child moves when fixed pos containing block height changes."> 5 <style> 6 body { 7 margin: 0px; 8 } 9 #fixed { 10 left: 0px; 11 width: 100px; 12 height: 200px; 13 position: fixed; 14 } 15 .box { 16 position: absolute; 17 bottom: 0; 18 width: 50px; 19 height: 50px; 20 background: green; 21 } 22 .ref { 23 position: absolute; 24 width: 50px; 25 height: 50px; 26 left: 0px; 27 top: 250px; 28 background: red; 29 } 30 </style> 31 <div class=ref></div> 32 <div style="position: absolute"> 33 <div id=fixed> 34 <div class=box></div> 35 </div> 36 </div> 37 <script> 38 document.body.offsetTop; 39 fixed.style.height = "300px"; 40 </script>