How to do it...

To create the UI Panels whose layering can be changed by clicking buttons, follow these steps:

1. Create a new Unity 2D project.
2. Create a new UI Panel GameObject named Panel-jack-diamonds. Do the following to this Panel:
   • For the Image (Script) component, drag the jack_of_diamonds playing card image asset file from the Project panel into the Source Image property. Select the Color property and increase the Alpha value to 255 (so this background image of the panel is no longer partly transparent).
   • For the Rect Transform property, position it in the middle-center part of the screen, and size it with Width = 200 and Height = 300.
3. Create a UI Button named Button-move-to-front. In the Hierarchy, child this button to Panel-jack-diamonds. Delete the Text child GameObject of this button (since we'll use an icon to indicate what this button does).
4. With the Button-move-to-front GameObject selected in the Hierarchy, do the following in the Inspector:
   • In the Rect Transform, position the button top-center of the player card image so that it can be seen at the top of the playing card. Size the image to Width = 16 and Height = 16. Move the icon image down slightly, by setting Pos Y = -5 (to ensure we can see the horizontal bar above the triangle).
   • For the Source Image property of the Image (Script) component, select the arrangement triangle icon image: icon_move_to_front.
   • Add an OnClick event handler by clicking on the plus sign (+) at the bottom of the Button (Script) component.
   • Drag Panel-jack-diamonds from the Hierarchy over to the Object slot (immediately below the menu saying Runtime Only).
   • Select the RectTransform.SetAsLastSibling method from the drop-down function list (initially showing No Function):

5. Repeat step 2; create a second Panel named Panel-2-diamonds with its own move-to-front button, and Source Image of 2_of_diamonds. Move and position this new panel slightly to the right of Panel-jack-diamonds, allowing both the move-to-front buttons to be seen.
6. Save your Scene and run the game. You will be able to click the move-to-front button on either of the cards to move that card's panel to the front. If you run the game with the Game panel not maximized, you'll actually see the panels changing order in the list of the children of the Canvas in the Hierarchy.