| <!doctype html> | |
| <title>CSS test: movement of absolute-position ancestor correctly moves fixed-position descendant depending on the static position</title> | |
| <link rel="help" href="https://drafts.csswg.org/css-position/#size-and-position-details"> | |
| <link rel="match" href="hypothetical-dynamic-change-001-ref.html"> | |
| <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> | |
| <link rel="author" href="https://mozilla.org" title="Mozilla"> | |
| <style> | |
| .ancestor, .child { | |
| width: 100px; | |
| height: 100px; | |
| background-color: green; | |
| } | |
| .child { | |
| position: fixed; | |
| /* NOTE: child remains auto-positioned */ | |
| } | |
| .ancestor { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| background-color: red; | |
| } | |
| </style> | |
| <div class="ancestor"> | |
| <div class="child"></div> | |
| </div> | |
| <script> | |
| onload = function() { | |
| let ancestor = document.querySelector(".ancestor"); | |
| window.unused = ancestor.getBoundingClientRect(); | |
| ancestor.style.left = "100px"; | |
| } | |
| </script> |