GUI.button order

I have this couples of repeatbuttons in one of my script. Whenever I click a button, the button will be able to drag.

My problem is whenever I dragged the button hovering other button, it’s rendered behind the other buttons.

Here’s how I render them

Code:
function OnGUI()
{
	for(var i = 0;i < transform.childCount; i++)
	{
		TogglePanel_	= GUI.RepeatButton (itemRect*, "",*_

> ItemPanel);
>
> if(TogglePanel*)*
> {
>
> if(!dragging)
> {
> dragging = true;
> originPos = itemRect*;*
> }
> if(dragging)
> Dragging(i, originPos);
> }
> }
*> *
> }
How do I set it so it’s rendered on the top?
I need some help for this…thanks ^^

There are two solutions based on where you draw your GUI.

On the right hand, you draw your GUI in one script, so the depth order is defined by the order of the call of GUI / GUILayout functions. To have a gui element draw over others, you should draw it at the end of your OnGUI method.

On the other hand, you draw your GUI with several scripts. You should consider using GUI.depth to order your gui through layers.