# Order

### Introduction

Children in a Screen, Component, or parent instance are drawn top-to-bottom, so that children further down are drawn on top.

<figure><img src="/files/9H3ULRDh26RgFubswr4U" alt=""><figcaption><p>Red is the first item drawn, so it is under the other rectangles. Blue is the last, so it appears on top.</p></figcaption></figure>

### Changing Order

Gum provides a number of ways to reorder instances.

Items can be right-clicked in the editor to change their order.

* Bring to Front - reorders the instance so that it is in front of all of its siblings.
* Move Forward - moves the instance in front of the sibling that is in front of it. In other words, moves the item forward by one index.
* Move In Front Of - moves the instance in front of the selected sibling.
* Move Backward - moves the instance behind the sibling that is currently behind it. In other words, moves the item backwards by one index.
* Send to Back - reorders the instance so that it is behind all of its siblings.

<figure><img src="/files/f4FKSrrA8cZXOwp51VBQ" alt=""><figcaption><p>Right-click options can be used to reorder instances</p></figcaption></figure>

Items can be re-ordered in the Project tree view by holding the alt key and pressing up or down.

<figure><img src="/files/ZZ6oPcAdbFABRrrcJOEM" alt=""><figcaption><p>Alt+arrow keys can be used to reorder items</p></figcaption></figure>

### Parent and Children Ordering

Gum uses a *hierarchical ordering* which means that a parent and all of its children draw before any of the siblings of the parent. For example, a container and all of its children draw before any other siblings of the container.

The following animation shows a container named ContainerInstance2 which draws on top of ContainerInstance1. All children of ContainerInstance2 also draw on top of children of ContainerInstance1.

<figure><img src="/files/I3iLl0BdGh7DAXgfF4W6" alt=""><figcaption><p>If a parent draws on top of other instances, then its children also draw on top</p></figcaption></figure>

If a parent is reordered, then all of its children also respect the new order. For example, if ContainerInstance2 is sent to the back, then all of its children draw below ContainerInstance1 and its children.

<figure><img src="/files/bEEIR2H49fBWQJFtxPpA" alt=""><figcaption><p>If a parent is sent to the back, all children also draw behind other siblings of the parent container.</p></figcaption></figure>

### Order and Stacking / Grid

If a parent uses a stack or grid layout for its Children Layout variable, then the order of the children in the Project tab determines their order in the stack or grid.

For more information, see the [Children Layout](/gum/gum-tool/gum-elements/container/children-layout.md) page.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flatredball.com/gum/gum-tool/gum-elements/general-properties/order.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.