How to make my button to be on top of other widgets?

I'm using MyGUI 3.1.

I have 2 layouts:
#1 Contains a transparent Widget with the size equal to full application screen size
#2 Contains a Button with the size 100x50

I want my Button to be clickable, this means that it should be always on top of the transparent Widget.
I can't move the button to be the child of the Widget.

I thought I can solve this by using different layers for my Layouts(widgets). But it seems not to work as expected.
I've created a sample layout to demostrate my problem:

<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Layout">
<Widget type="Widget" skin="Panel" position="40 128 216 232" layer="Back"/>
<Widget type="Button" skin="Button" position="160 280 128 72" layer="Main"/>
</MyGUI>


When I open this layout in LayoutEditor the button draws on top of panel. But when I click the Panel widget it draws on top of Button.
What I want is the Button to always stay on top of Panel and other widgets.

Also, where can I find documentation for layers? What are they desidned for? How to use them?

When I open this layout in LayoutEditor the button draws on top of panel. But when I click the Panel widget it draws on top of Button.
That just a specific of LayoutEditor's edit mode - to be able to see background widgets. Use Test mode to see actual behaviour, or load into your application. Your layout is correct.

Yes, I've checked it in the actual application and it worked. I was misleaded that in the Test mode it was not working:
when I click the Panel widget it draws on top of Button.