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