<!DOCTYPE html> | |
<style> | |
body { | |
margin: 0; | |
} | |
div { | |
width: 100px; | |
height: 100px; | |
top: 20px; | |
background-color: blue; | |
} | |
#target0 { | |
left: 20px; | |
position: relative; | |
} | |
#target1 { | |
left: 20px; | |
position: relative; | |
} | |
#target2 { | |
left: 220px; | |
position: fixed; | |
z-index: 0; | |
} | |
#target3 { | |
left: 420px; | |
position: absolute; | |
z-index: 0; | |
} | |
</style> | |
There should be no invalildations on change of position without actual change of position and size. | |
<!-- target0 ensures we don't strip anonymous wrappers (and trigger a layout) when the other elements change position. --> | |
<div id="target0"></div> | |
<div id="target1"></div> | |
<div id="target2"></div> | |
<div id="target3"></div> |