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

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

给你。拖动上边缘或右上角，div将跳到屏幕的上边缘，有时甚至部分脱离屏幕

HTML:

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

#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;
}

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');
}

JS/jQuery:

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

#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;
}

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');
}

---

找到了解决办法。它在里面

这解决了问题：

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

找到了解决办法。它在里面。添加，

位置：已修复！重要的，
顶部：自动！重要的，和
底部：0！重要的解决了这个问题。