jQuery UI 可调整大小移动我的 DOM 元素

Question

前言：我搜索了 stackoverflow 并找到了其他几个提出这个确切问题的实例。我试图理解他们，但我是一个新手，这对我来说没有意义。对于再次提出同样的问题，我深表歉意，但提出的解决方案似乎不起作用。

这里是my jsfiddle。拖动顶部边缘或右上角，div 会跳到屏幕的顶部边缘，有时甚至会部分跳出屏幕。

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

找到了解决办法。它在Jide's comment over here。

这解决了问题：

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