Positioning

Macaw allows three types of positioning: static (default), absolute and fixed. Each of these mechanisms has its own uses and limitations. Every element within Macaw can have its own type of positioning.

Positioning modes can be set using the three icons on the left of the property bar, which are visible when an element is selected. The wave icon is used for static, the crosshair is for absolute and the pin is for fixed positioning.

Static

Static is the default positioning mode of Macaw. Elements set to static are positioned in relation to the element that precedes it in the document. This can be somewhat confusing to someone unfamiliar with web development, however it's very important to learn the concept of static positioning as most of the web is constructed using these mechanics.

Margins are the properties used to set the distance between an element and the one before it. When dragging an element around the canvas, Macaw will automatically calculate the margins necessary to position the element. You can also use the margin controls in the property bar for fine-tuning.

Static positioned elements have a blue outline.

Note: Elements using static positioning are essentially chained together. Therefore, modifying properties of one element may affect the positioning of other elements.

Absolute

Absolute positioning allows elements to be placed at a specific coordinate, which is relative to its parent's coordinates. Elements set to absolute are not in the document flow and, therefore, do not affect the position of the elements around it.

Absolute positioned elements have an orange outline.

Fixed

Fixed positioning is similar to absolute positioning except that the coordinates set for fixed elements are relative to the viewport instead of the element's parent. So, elements with fixed positioning will stay in place as the document is scrolled.

Fixed positioned elements have a green outline.

Origins

Origins define the direction in which an element is positioned. The options translate to different properties based on the positioning mode.

Elements with static positioning allow x-origins to be changed to left, right or center. Left origins will use margin-left to position an element. Right origins will float an element to the right and utilize margin-right for positioning. Center origins will force an element to center using auto for margin-left and margin-right.

Elements with absolute or fixed positioning have x and y origin controls. Left and right x-origins will publish as left and right properties. Center x-origins will publish as left: 0; right: 0; margin-left: auto; margin-right: auto;. Y-origins will use top and bottom properties and center y-origins will publish astop: 0; bottom: 0; margin-top: auto; margin-bottom: auto;.

Guides

Macaw provides on-canvas positioning guides to help you position an element precisely how you want it. Positioning guides appear when dragging an element around the canvas when its edges align with another element or the grid.

If guides do not appear, they may have been toggled off. They can be toggled back on using View > Toggle Positioning Guides or Cmd+' Ctrl+'.

Margins

Margin indicators (solid semi-transparent blocks that show up on element's sides when it's selected) help to determine how an element will be placed on the canvas with relation to the surrounding elements. Indicators change color to identify the positioning mode used: blue is for static, orange is for absolute and green is for fixed.

Note: Top position/margin can only be set in pixel values.

Padding

Padding can be applied to all elements except for empty elements and empty containers. Once a standard element becomes a container (with child elements of any type), it gains the ability to have its paddings set.

Padding is set inside the Dimensions section of the Inspector Pane and is symbolized by an interactive map of padding properties (all paddings, top, left, bottom and right). A value field next to the padding map shows padding value for the currently selected property. Apart from setting individual paddings, or applying the padding to all side with the center most icon, holding shift and clicking on different padding properties allows for setting multiple paddings at the same time (e.g. top and bottom).