Positioning elements

Almost everything on a web page is positioned by the things around it, and that is the point rather than a limitation: it is why a page still works when the window is narrow, when the text is longer than you planned, or when a client adds a fourth card to a row of three.

BooshDesign has two ways to place something, and the first is nearly always the right one.

In flow

The default. An element sits after the one before it and before the one after it, and everything moves together when anything changes.

You position it by deciding how its container arranges its children — see Laying out a container — and by giving it space around itself.

Space around an element

Pick the Spacing tool (S). Eight handles appear:

• The inner four are padding — space inside the element, between its edge and its content.
• The outer four are margin — space outside it, pushing other things away.

Drag one and it lands on your spacing scale. Pull an outer handle inwards and you get a negative margin, which pulls the element towards its neighbour — the usual way to overlap two things without leaving the flow.

Hold ⌥ for the opposing pair, ⌘ for all four.

You can also set these in Spacing in the right panel, where they read as Space above and Space below.

Free placement

Sometimes an element genuinely does not belong in the flow: a badge on a corner, a shape behind a heading, a label over an image.

Select it and choose Free under Placement. You will be asked to confirm, because this is the one choice here that cannot adapt on its own — a freely placed element sits where you put it and nothing moves around it, so it will not respond when the page is narrower and it can overlap other things on a phone.

It is the right answer for decoration. It is the wrong answer for anything that has to hold its place.

Pinning

Free placement does nothing by itself — an element with no offsets sits exactly where it would have anyway. What makes it move is what it is pinned to, and that panel appears as soon as you choose Free.

The nine anchors are the quick way. Each one pins two edges:

Top left	Top	Top right
Left	Centre	Right
Bottom left	Bottom	Bottom right

Centre does the thing people usually get wrong by hand: an element offset by half its container has its corner in the middle, so it is also pulled back by half its own size.

The four offsets below are for when an anchor is nearly right. Each takes a number and a unit — px, rem or %.

In front of is the stacking order, for when two freely placed things overlap.

Width, when it was filling

An element set to Fill has no width of its own — it is as wide as whatever holds it. Out of the flow that stops being true, so anything filling is pinned to both the left and the right edge when you set it free. It goes on stretching with its container rather than being frozen at the width it happened to have.

Change the anchor and that goes away, which is the right behaviour: pinning it to the top left is you saying you want it at the top left, not stretched.

Getting back

Placement stays where it is the whole time, with Free lit. Choose In flow again and every offset, the transform and the stacking order are all removed, so nothing is left behind to surprise you later.