jQuery UI resizable moving my DOM element

Question

Preface: I have searched stackoverflow and found several other instances where this exact question is asked. I have tried to understand them, but I am a newbie and this just does not make sense to me. I apologize for asking the same question again, but the solutions presented just do not seem to work.

Here's my jsfiddle. Drag the top edge or top right corner and the div will jump to the top edge of the screen, sometimes even partially off screen.

HTML:

<div id='chat'>
    <div id='content'></div>
    <input id='field' type='text' value='',placeholder='' />
</div>

CSS:

#chat {
    background-color: rgba(0,0,0,0.8);
    min-width: 400px;
    min-height: 200px;
    position: fixed !important;
    bottom: 10px !important;
    left: 10px;
    padding: 5px;
    color: white;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
}

#content {
    position: absolute;
    overflow-y: scroll;
    top: 5px;
    bottom: 30px;
    left: 5px;
    right: 5px;
    font-family: verdana;
    font-size: 8pt;
}

#field {
    position: absolute;
    left: 5px;
    bottom: 5px;
    background-color: rgba(0,0,0,0);
    color: white;
    border-width: 1px;
    outline: 0;
    font-family: verdana;
    font-size: 8pt;
}

JS/jQuery:

window.onload = function() {
    $('#field').each(function(){
        $(this).width($(this).parent().width()-4);
    });

    $('#chat').resizable({
        handles: 'n, ne, e',
        resize: function(event, ui) {
            $(this).css({left:'10px'}),
            $(this).css({bottom:'10px'}),
            $('#field').width($('#field').parent().width()-4);
        }
    });    
    var handles = $('#chat').resizable('option', 'handles');
    $('#chat').resizable('option', 'handles', 'n, ne, e');
}

Answer 1

Found the solution. It's in Jide's comment over here.

This fixes the problem:

{
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
}