Skip to main content

Z Axis Position

Determine how overlapping nodes appear.

If nodes overlap on a scene, the node that was added latest will appear on top. You can change this behavior by setting the zPosition property on a node. It is called Z because if X and Y are two-dimensional axes, you can imagine the Z-axis as a third dimension coming out of the screen. The zPosition property is a number. The higher the number, the higher the node's "layer" will be on the screen among overlapping nodes.

By default, all nodes have a zPosition: 0, in which case the latest node added will appear on top. But if you set zPosition: 1 on a node, it will appear on top of all the other nodes with zPosition: 0.

Below, the square is added to the scene after the circle, so the square should appear on top. But, we set the zPosition: 1 on the circle, so it appears on top of the square.

Loading...
Explore:
  • See the example without the zPosition applied.
  • zPosition values can be any numbers, and their values will be compared to decide the order in which to draw the nodes.
  • Overlapping nodes with color opacity less than 1 results in blending. Set zPosition to put the green circle on top.
  • Set zPosition to put the red circle on top, and the blending is different.