Skip to content
Jux Docs
WelcomeDesignersDevelopers

Size and Position

Size and position are crucial aspects of design. The size and position module in the dynamic design panel allows you to adjust the width, height, and position of elements in your design.

All width and height fields are of the dimension type and can be tokenized. They accept the following units: PX, VW, VH, EM, REM, and the strings ‘auto’ or ‘none’ (which don’t have a unit).

The size and position module consists of the following submodules:

Width Submodule

  1. Width field: Can also accept ‘auto’ string. ‘auto’ sets the width to be determined by the content’s width (including padding and border, if present)
  2. Max/Min width fields - Can also accept ‘auto’ string.

Height Submodule

  1. Height field: Can also accept ‘auto’ string. ‘auto’ sets the height to be determined by the content’s height (including padding and border, if present)
  2. Max/Min height fields: Can also accept ‘None’ string
Width and Height panel
Width and Height panel

Position Submodule

The position submodule in the ‘Size and Position’ module allows you to switch between three main positioning methods for all canvas elements:

  1. Static (default)
  2. Relative
  3. Absolute

For ‘relative’ and ‘absolute’ positions, the submodule allows setting a Z-index value to determine the stacking order of overlapped objects.

Position types
Position types

Position: static

Static positioning is the default for all elements and components, following the natural document flow without the ability to set a Z-index, and it doesn’t open any additional DDP fields when selected.

Position: relative

This position option allows you to visually ‘move’ the object in relation to its original ‘static’ position by a set amount of dimension units (PX/VW/VH/Auto) in any of 4 directions.

Position relative
Position relative

Useful for:

  • Creating hover effects (e.g., card pop-up on hover)
  • Changing Z-index between states (e.g., overlapping avatars)
  • Note: Relative positioning with no values looks identical to static, useful for parents of absolute-positioned children

Position: absolute

This position option allows you to visually ‘move’ the object in relation to its closest parent with a non-static position (relative, absolute, or fixed) by a set amount of dimension units (PX/VW/VH/Auto) in any of 4 directions.

This is useful for elements that need to “break away” from the normal layout, such as badges over buttons, tooltips, or floating action buttons.

Position absolute
Position absolute