# LayOut sample code question

**URL:** <https://forums.fusetools.com/t/layout-sample-code-question/972>\
**Category:** General\
**Created:** [December 7, 2015, 9:56am UTC](https://forums.fusetools.com/t/layout-sample-code-question/972 "2015-12-07T09:56:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mawg123](https://avatars.discourse-cdn.com/v4/letter/m/74df32/32.png) [@mawg123](https://forums.fusetools.com/u/mawg123)\
**Post date:** [December 7, 2015, 9:56am UTC](https://forums.fusetools.com/t/layout-sample-code-question/972/1 "2015-12-07T09:56:59Z")

</div>

Hi,

I am new here, just starting to learning Fuse…

Refer to the Layout sample code: [https://www.fusetools.com/examples/layout](https://www.fusetools.com/examples/layout)

there are Grid with 3 Rows and 1 Column. the first Row (Row=“0”) is an Image the 2nd Row ( Row=“1” ) is a Grid with 1 Row and 3 Columns the 3rd Row ( Row=“2” ) is DockPanel

… 73° Sunday, March 23 …

my question is :

1. if I move the code of Image(Row=“0”) before Grid(Row=“1”), why it can not display properly? 2) I am quite confus ‘DockPanel’ and ‘StackPanel’. Could you please explain when I need to use ‘DockPanel’, or ‘StackPanel’?

Thanks

Regards, Weigang

---

<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:** [December 8, 2015, 11:13am UTC](https://forums.fusetools.com/t/layout-sample-code-question/972/2 "2015-12-08T11:13:29Z")

</div>

Hi!

1. This specific example does some tricks. The reason for the ordering is that the 2nd Row (Row=“1”) should be blended on top of the Image (Row=“0”).

The Image on the 1st row (Row=“0”) also has `RowSpan="2"` which means that it covers _both_ the 1st and 2nd Row.

The layer ordering in Fuse means that the element defined first (closest to the top in the .ux file) gets drawn _over_ the next item. This is why the 2nd Row is defined before the 1st row, so that the text label can be blended on top.

I’m not sure if I would have used this specific way of implementing the layout myself, as the overlapping grid rows are a bit confusing, but it definitely works. 🙂

1. You can read more about the different panels [here](https://www.fusetools.com/learn/fuse#layout). There’s also an illustration to show the differences [here](https://www.fusetools.com/learn/guides/fuselibs-panels).