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, 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 comento que 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 una posición `relative`. Espero te ayude esta solución. Saludos.