Layout properties and Translate properties have different uses and purposes, though they both are used to position nodes. They can be used independently or, occasionally, together.

Translate Properties

Translate properties are typically used for:

1. Animating nodes for effects that temporarily move the node without adjusting the layout position or the layout behavior of the parent.

OR

2. Positioning a node in a Group.

There are translateX, translateY, and translateZ properties on Node. So translate properties can be used to translate nodes in both 2D and 3D space..

Layout Properties

Layout properties are typically used for:

1. Positioning nodes in layout panes that work with absolute positioning (for example Pane or AnchorPane) or are unmanaged.

OR

2. A custom pane you create yourself, overriding layoutChildren, and customizing the layout positioning of child nodes using setLayout.

If you are using a 2D layout pane that manages the layout of its children (e.g. StackPane, HBox, VBox), then usually you won’t explicitly set layout values in your code. Instead, you will let the layout pane manage the layout and set the layout values.

If you did try to set the layout values yourself and then add a node to a managed layout pane, the layout pane will just overwrite any values you set the next time it runs a layout pass. For example, a StackPane with no additional constraints will ensure that all its children are laid out in the center of the pane, regardless of what layout values you try to set on the node.

There is no layoutZ property on Node, only layoutX and layoutY. So defining a 3D layout manager to layout nodes in a 3D space is not supported.

Uses in 2D and 3D work

In 3D work, all nodes are generally placed in a Group and positioned using translate rather than layout.

In 2D work, usually, nodes are placed in layout panes that will manage the layout for you without adjusting the translate value. But translation might still be used for some applications, such as animation work. For example, performing a bounce effect in a Mac dock-type control. The activated application icon bounces up and down but the layout positioning of other icons in the dock control does not change. After the bounce effect completes, the activated application icon returns to its original position in the dock.

Translation values don’t affect the layout values for the node and the layout panes don’t take them into account when calculating the layout positioning for nodes they manage, which is why a bounce effect using translation won’t affect the layout of any other sibling nodes in the pane and the node undergoing the animation effect will return to its original layout position once the translate values return to zero.

In 2D work, layout and translation can be used independently or together as the final position of a node is calculated as layout + translation.

You might still use layout in 3D, though it would be less common. You could use it for laying out nodes on a 2D surface that is repositioned in 3D. For example, if you were implementing a 3D VR UI and wanted to show a dialog to the user with some info text, and Confirm and Cancel buttons, you might layout the dialog in 2D on a layout pane, then place the dialog in a Group and locate it in 3D space using translation.

Related concepts: Transitions and Transforms and Cameras

Transition animations such as TranslateTransition and PathTransition, work by modifying translate values rather than layout values, and so can be used in both 2D and 3D work.

Transforms such as Translate and Rotate can also be used in both 2D and 3D. Transforms are applied independently of both translate and layout properties, with the algorithm, as documented in the Node documentation, being:

1. Layout (layoutX, layoutY) and translate (translateX, translateY, translateZ)
2. Rotate (rotate)
3. Scale (scaleX, scaleY, scaleZ)
4. Transforms list (transforms) starting from element 0

Cameras such as PerspectiveCamera are nodes, but it only makes sense to apply translations, rotations, and transforms on them, not layout.