Con un `switch` y utilizando el `event.which` para obtener la tecla que realizó el evento funciona correctamente, es cuestión de sumar y restar los pixeles hacia arriba y a la izquierda (`top`, `left`), te dejo el ejemplo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).keydown(function(tecla){
    //$('#hijo').css('position', 'relative');
        switch (tecla.which) {
        case 37:
            $('div').animate({
                left: '-=10px'
            }, 'fast'); //left arrow key
            break;
        case 38:
            $('div').animate({
                top: '-=10px'
            }, 'fast');
            break;
        case 39:
            $('div').animate({
                left: '+=10px'
            }, 'fast');
            break;
        case 40:
            $('div').animate({
                top: '+=10px'
            }, 'fast');
            break;
        }
    });

<!-- language: lang-css -->

    #square {
      border: 1px solid black;
      height: 300px;
      margin: 20px auto;
      position: relative;
      width: 60%;
    }

    #square #hijo {
        background:#ccc;
        height:100px;
        width:100px;
        position: absolute;
        top: 0;
        left: 0;
    }


<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <section id="square">
        <div id="hijo">
        </div>
    </section>

<!-- end snippet -->

Te dejo también el ejemplo en tu versión de código con el mismo concepto del `top` y `left` que te comenté por si lo necesitas:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(document).keydown(function(tecla){
        $('#hijo').css('position', 'relative');
        if (tecla.keyCode == 37) { 
            $('#hijo').animate({left: "-=10px"}, 'fast');
        }else if(tecla.keyCode == 38) { 
            $('#hijo').animate({top: "-=10px"}, 'fast'); 
        }else if(tecla.keyCode == 39){ 
            $('#hijo').animate({left: "+=10px"}, 'fast'); 
        }else if(tecla.keyCode == 40){
            $('#hijo').animate({top: "+=10px"}, 'fast');
        }
    });

<!-- language: lang-css -->

    #square {
      border: 1px solid black;
      height: 300px;
      margin: 20px auto;
      position: relative;
      width: 60%;
    }

    #square #hijo {
      background-color: red;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 50px;
      height: 50px;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <section id="square">
        <div id="hijo">
        </div>
    </section>

<!-- end snippet -->

Te comento que en mi ejemplo dejé una línea comentada en el `JQuery`, ya que si observas en tu `css` le estás dando una posición `absolute` y luego en tu `JQuery` una posición `relative`. Espero te ayude esta solución. Saludos.