hypothetical-dynamic-change-001.html (939B)
1 <!doctype html> 2 <title>CSS test: movement of fixed-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 position: fixed; 10 width: 100px; 11 height: 100px; 12 background-color: green; 13 /* NOTE: child remains auto-positioned */ 14 } 15 .ancestor { 16 left: 0; 17 top: 0; 18 background-color: red; 19 } 20 </style> 21 <div class="ancestor"> 22 <div class="child"></div> 23 </div> 24 <script> 25 onload = function() { 26 let ancestor = document.querySelector(".ancestor"); 27 window.unused = ancestor.getBoundingClientRect(); 28 ancestor.style.left = "100px"; 29 } 30 </script>