The Z-Index property of an element determines which elements appear on top when multiple elements occupy the same x/y coordinates. Elements with higher Z-indices are rendered on top of elements with lower Z-indices.

In the example above, the blue rectangle is rendered on top of the red rectangle because it has a higher z-index.

Send to Front / Back

The Z-Index can be adjusted manually via the property grid, but there are shortcuts for two common operations: Bring to Front and Send to Back. The Bring to Front operation sets the Z-Index of the selected element(s) such that is the higher than all other elements in the room. Similarly, Send to Back sets the Z-Index to be the lowest of any element in the room.

Viewing Elements by Z-Index

In Edit Mode, each room contains a small triangle next to the room name. By clicking on this arrow, a list of elements in the room will appear. By default, this list of elements is sorted alphabetically, but it can be sorted based on Z-Index by clicking on the A-Z icon.

When sorting by Z-Index, the Z-Index value of each element is displayed next to the element name. The value displayed is directly editable, so you can easily rearrange how elements appear on top of each other.

Background Z-Index

The background of a room has a Z-Index of 0. All elements must have a Z-Index greater than 0 to appear on top of the background.


Did this page help you?