# Rendering order or sibling nodes

**URL:** <https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251>\
**Category:** How-to Discussions\
**Created:** [September 16, 2016, 6:38am UTC](https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251 "2016-09-16T06:38:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RanzQ](https://avatars.discourse-cdn.com/v4/letter/r/b5e925/32.png) [@RanzQ](https://forums.fusetools.com/u/RanzQ)\
**Post date:** [September 16, 2016, 6:38am UTC](https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251/1 "2016-09-16T06:38:39Z")

</div>

What defines the render order when my app structure is like this?

```auto
<App>
	<ClientPanel>
		<Panel>
			<ScrollView>
				<Panel>
					<ColumnLayout ColumnCount="3"/>
					<Each ... >
					</Each>
				</Panel>
			</ScrollView>
			<Image File="Assets/background.png" />
		</Panel>
	</ClientPanel>
</App>

```

The `ScrollView` wasn’t visible when the `Image` was the first sibling in the `Panel`. For a web developer this is a bit confusing since in HTML and SVG the last sibling is on top. Or is this a wrong way to add a background image?

EDIT: Topic should be “for sibling nodes”

EDIT2: I just found the `Layer="Background"` property in the [hikr example](https://github.com/fusetools/hikr/blob/master/Pages/SplashPage.ux#L7) but having only these 3 layers is a bit limited imo

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [September 16, 2016, 8:02am UTC](https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251/2 "2016-09-16T08:02:25Z")

</div>

The default rendering order is last child -\> first child. Those at the “top” of the code are also at the “top” of the visual stack.

We don’t have use-cases yet where more layers are required. You can also use the `ZOffset` parameter to tweak positioning (it’s still local to the panel however).

---

<div class="post-metadata">

**Author:** ![RanzQ](https://avatars.discourse-cdn.com/v4/letter/r/b5e925/32.png) [@RanzQ](https://forums.fusetools.com/u/RanzQ)\
**Post date:** [September 16, 2016, 8:29am UTC](https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251/3 "2016-09-16T08:29:45Z")

</div>

> The default rendering order is last child → first child.

Just being curious, why this decision? People are used top being drawn first (at least in HTML and Android Layouts).

---

<div class="post-metadata">

**Author:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [September 16, 2016, 8:58am UTC](https://forums.fusetools.com/t/rendering-order-or-sibling-nodes/2251/4 "2016-09-16T08:58:11Z")

</div>

This is definitely one of those cases where expectations vary depending on which tools and frameworks you have experience with.

We decided to go with the behavior that matches typical layer-based design tools, such as Photoshop & Sketch (as mentioned [here](https://www.fusetools.com/docs/fuse/controls/panel)).