Problem with depth

I'm creating a solitaire game that has a deck of cards that when clicked deals out the top three cards from the deck. I want it so that the cards pile on top of each other so that the first card dealt is at the bottom of the pile and so on. I have managed to get this to work however when the cards are displayed in the pile the card at the bottom is always displayed as the top card, any help with getting the cards to display in the correct order would be appreciated.

This is the code I have that should change the depth when the card is created
Code:
card_clicked    = false;
card_name        = 0;
card_sprite        = 0;
card_image        = 0;
image_speed        = 0;
card_value        = 0;
card_suit        = 0;

depth = -10
And this is the code for when the card is created
Code:
for (var i = 0; i <= cards_left - 1; i++) {
    
        if ds_stack_size(card_pile) > 0 {
        
        
        // creates a new card
        new_card =    instance_create_depth(_x + 100 ,_y, 0, obj_card); 
        
        // removes card from the top of the card stack
        var card_names = ds_stack_pop(card_pile)
        
        // maps the card to the name of the card at the top of the pile
        scr_map_card(card_names)

    
        //    set values
        new_card.card_name = card;
        new_card.card_suit = card_suit;
        new_card.card_value = card_value;
        new_card.card_sprite = card_sprite;
        new_card.card_image = card_image;

        //    set card image
        new_card.sprite_index = card_sprite;
        new_card.image_index = card_image;
        
    }
 
Top