hypothetical-dynamic-change-002.html (981B)
1 <!doctype html> 2 <title>CSS test: movement of absolute-position ancestor correctly moves fixed-position descendant depending on the static position</title> 3 <link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details"> 4 <link rel="match" href="hypothetical-dynamic-change-001-ref.html"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="author" href="https://mozilla.org" title="Mozilla"> 7 <style> 8 .ancestor, .child { 9 width: 100px; 10 height: 100px; 11 background-color: green; 12 } 13 .child { 14 position: fixed; 15 /* NOTE: child remains auto-positioned */ 16 } 17 .ancestor { 18 position: absolute; 19 left: 0; 20 top: 0; 21 background-color: red; 22 } 23 </style> 24 <div class="ancestor"> 25 <div class="child"></div> 26 </div> 27 <script> 28 onload = function() { 29 let ancestor = document.querySelector(".ancestor"); 30 window.unused = ancestor.getBoundingClientRect(); 31 ancestor.style.left = "100px"; 32 } 33 </script>