Any suggestions on how to place cardsontable_player_id ontop of cardsontable

[developgame]

Thanks for any help
I am a newbie here, doing the crazyeight game.

I would like to put card myhand_Item_cardid , a stock item, from myhand div to cardontable div where myhand_Item_cardid completely covers the last card on cardontable - just like a real card game.
However, the new card myhand_item_cardid always lineups vertically below the previous card. If I do a refresh (f5), then myhand_Item_cardid will only cover the last card.

I have tried using this.placeOnObject( 'cardontable_'+player_id, 'myhand_item_'+card_id )
, ( 'cardontable', 'myhand_item_'+card_id )
this.placeOnObjectPos( 'cardontable_'+player_id, 'myhand_item_'+card_id, 0,0 )
this.placeOnObjectPos( 'cardontable', 'myhand_item_'+card_id, 0,0 )
adding position: absolute to .cardontable in css

Here is my css

Code: Select all

#cardontable {
	top: 0px;
    width: 72px;
    height: 96px;
}

.cardontable {
	top: 0;
	left: 0;
    width: 72px;
    height: 96px;
    background-image: url('img/cards.jpg'); 
}

Here is the javascript

Code: Select all

       playCardOnTable: function( player_id, color, value, card_id ,stateName )
        {
			console.log( " in playCardOnTable " +stateName );
			
           // player_id => direction
            dojo.place(
			    this.format_block( 'jstpl_cardontable', {
                    x: this.cardwidth*(value-2),
                    y: this.cardheight*(color-1),
                    player_id: player_id                
                } ), 'cardontable' );
             
            if( player_id != this.player_id )
            {
                this.placeOnObject( 'cardontable_'+player_id, 'overall_player_board_'+player_id );
            }
			else
            {
                
                if( $('myhand_item_'+card_id) )
                {
                    this.placeOnObject( 'cardontable_'+player_id, 'myhand_item_'+card_id );

                    this.playerhand.removeFromStockById( card_id );
                }
            }

        },

Here is my tpl

Code: Select all

 
 
 <div id="playertable" class="whiteblock" >
	<div>
		<button id="pickcardbtn" class="drawdeck ">Pick Card</button>		
	</div>
	<div id="cardontable"></div>
</div>

<div id="myHand_wrap" class="whiteblock" >
	<h3>My Hand </h3>
	<div id="myhand">	
	</div>
</div>

<script type="text/javascript">
var jstpl_cardontable = '<div class="cardontable" id="cardontable_${player_id}" style="background-position:-${x}px -${y}px">\
                        </div>';

</script>