Background Image Overlapped Problem with jQuery

Question

Hi, Here is my working page. I attached buttons to white bishop and you can move around but left images are overlapped by right images. I think the problem is with CSS. The brief structure is here.

<script>
        $(document).ready(function(){
            $('#top').click(function(){
                $('#p81').animate({top: "-=64px"}, 100);
            });
</script>
<style>
        div.chess_board{
            height: 512px;
            position: relative;
            width: 512px;
        }
        div.chess_square{
            height:64px;
            position: absolute;
            width:64px;
        }
        div.chess_square.white {
            background: none repeat scroll 0 0 #ffffff;
        }
            .
            .
            .
        div.chess_piece{
                background-image: url("sprite.png");
                height: 64px;
                width: 64px;
                position: absolute;
            }
        div.chess_piece.bishot.white{
            background-position: -64px 0;           
        }
</style>

<div class="chess_board">
  <div id="b81" class="chess_square white" style="top: 448px; left: 64px;">
    <div class="chess_square_inner"></div>
    <div id="p81" class="chess_piece bishot white"></div>
  </div>
</div>
<input type="button" id="top" value="top" />

Answer 1

You get the overlap effect because you are using a transparent PNG. When you move the position of the bishop over, it simple moves on top of the rook. You can do one of the following:

1. Double up your sprite to have the white and gray backgrounds. Then switch to the appropriate space. The PNG will not be transparent so you will cover it up.
2. You can update your jQuery to hide the background of the destination, in this case the rook.

Example for item 2: (You will have to get crafty with your selectors)

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $("#p80").css("background-image", "none");
});

UPDATE

After looking at your page a bit more you can also resolve it by setting the background color of the div with class 'chess_piece'.

.chess_piece
{
    background-color: #ffffff/#cfcfcf;
}

You could do it with jQuery and your event:

$('#left').click(function(){
    $(piece).animate({left: "-=64px"}, 100);
    $(piece).css("background-color", "#cfcfcf");
});

UPDATE 2

After seeing your comment, the issue has changed slightly. To overcome that issue you need to add a z-index to your piece. The generated markup would be something like:

<div class="chess_piece bishot white" id="p81" style="top: -64px; left: 64px; z-index: 10000;"></div>