title: Understanding CSS transform that does not trigger layout
body: <p>I read that some CSS transform properties do not trigger layout:</p>
  
  <p>scale, rotate, position, opacity</p>
  
  <p>This might be an obvious question, but does that mean they will always be applied independently regardless of other contents on the page?</p>
  
  <p>For example, when I change a position property with translate(x,y) to move down a box, will it not push the contents below? I made a <a href="https://fiddle.jshell.net/kta6nkh3/" rel="nofollow">fiddle</a> myself, and it seems that changing position is completely out of the dom flow.</p>