Layout on the web (and hence, layout in Handoff) works a little bit different from vector-based design tools like Sketch or Photoshop. In those tools, you can position elements anywhere in a document. In Handoff, elements are positioned vertically, like paragraphs in a document.
The easiest way to reason about layout in Handoff is to imagine that every element is a box. A box with invisible boundaries that automatically snaps to its natural position – on top of each other, or next to each other.
An example to show how everything in Handoff has a natural position.
To get a feel of what this means, try adding a few elements in Handoff, and see how they all snap to a default position.
It's important to know that elements in Handoff can be grouped by dropping them inside of each other. For example, you can add a heading, paragraph and a button inside a box. When you move the box, all the elements inside come along. And as you add more content, the size of the box increases automatically, pushing elements underneath further down the page.
Layout on the web is not like a document in Word or an image in Photoshop, where you can position content anywhere you like. This is because layout on the web needs to work responsively for different screen sizes, while content in document editors are created to be viewed in one size.
An example to show how everything in Handoff scales automatially.
At first, the comparison of web layout to document layout may bring back terrifying memories of fighting with positioning images in Word. But once you get the hang of it, designing in web layout becomes your greatest power, because web layout allows you to create designs that adapts to other screen sizes automatically. This would have required tons of repetitive work in traditional tools like Sketch or Figma.