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" />