jqueryui'；s可调整大小否定位置：固定

我正在创建一个示例chrome扩展，在其中我将一个小的

注入到一个页面中。它应该放在窗户的左下角，所以我给了它

   position: fixed;
    bottom: 0px;
    left: 0px;

这很好，直到我想使

的大小可以调整。由于某种原因，当我将jQuery UI的可调整大小添加到

时，它否定了fixed，因此

被粘贴到整个页面的底部，而不是窗口。我怎样才能解决这个问题

请注意，我已经尝试了accept解决方案，但是当我尝试它时，当框确实留在窗口中时，当我尝试调整它的大小时，整个东西随着大小的增加而浮动。出于某种原因，它将“顶部”和“高度”绑定在一起，以便在调整大小时两者都会发生变化

manifest.json:

{
    "name": "injection",
    "description": "samples at code injection",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [ "<all_urls>"],
            "css":["style.css", "jquery-ui.css"],
            "js":["jquery-2.1.0.min.js", "resize.js", "jquery-ui.min.js"]
        }
    ],
    "permissions": [ "http://127.0.0.1:8000/", "<all_urls>", "storage", "tabs" ]
}

$(function() {
    var container = $("<ul />", { class: "container_t" });
            container.resizable({ handles: "n" });
            var header = $("<li />", { class: "header_t" });
            var content_container = $("<li />", { class: "content_container_t" });
        container.append(header);
        container.append(content_container);
    $('body').append(container);
});

.container_t {
    position: fixed;
    bottom: 0px;
    left: 0px;
    list-style: none;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

$(function() {
    var resize_container = $("<span />", {class: "resize_container"});
        var container = $("<ul />", { class: "container_t" });
                container.resizable({ handles: "n" });
                var header = $("<li />", { class: "header_t" });
                var content_container = $("<li />", { class: "content_container_t" });
            container.append(header);
            container.append(content_container);
        resize_container.append(container);
    $('body').append(resize_container);
});

.resize_container {
    position: fixed !important;
    top: 79% !important;
    left: 0px !important;
}

.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

ui-resizable-e {
    cursor: e-resize;    
    border-right: 5px solid purple;
}

正如我所说的，这个解决方案对我来说并不完美，但已经很接近了。我必须拿出底部：0；从我添加的新容器中，将其替换为top:80%！重要的； 代码如下所示：

resize.js:

{
    "name": "injection",
    "description": "samples at code injection",
    "version": "1",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": [ "<all_urls>"],
            "css":["style.css", "jquery-ui.css"],
            "js":["jquery-2.1.0.min.js", "resize.js", "jquery-ui.min.js"]
        }
    ],
    "permissions": [ "http://127.0.0.1:8000/", "<all_urls>", "storage", "tabs" ]
}

$(function() {
    var container = $("<ul />", { class: "container_t" });
            container.resizable({ handles: "n" });
            var header = $("<li />", { class: "header_t" });
            var content_container = $("<li />", { class: "content_container_t" });
        container.append(header);
        container.append(content_container);
    $('body').append(container);
});

.container_t {
    position: fixed;
    bottom: 0px;
    left: 0px;
    list-style: none;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

$(function() {
    var resize_container = $("<span />", {class: "resize_container"});
        var container = $("<ul />", { class: "container_t" });
                container.resizable({ handles: "n" });
                var header = $("<li />", { class: "header_t" });
                var content_container = $("<li />", { class: "content_container_t" });
            container.append(header);
            container.append(content_container);
        resize_container.append(container);
    $('body').append(resize_container);
});

.resize_container {
    position: fixed !important;
    top: 79% !important;
    left: 0px !important;
}

.container_t {
    list-style: none;
    bottom: 0px;
    left: 0px;
    width: 350px;
    height: 150px;
    background-color: red;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.header_t {
    width: 100%;
    height: 35px;
    background-color: blue;
    padding: 5px;
    box-sizing: border-box;
}

.content_container_t {
    width: 100%;
    height: 70%;
    background-color: green;
    padding: 5px;
    box-sizing: border-box;
}

.ui-resizable-n {
    cursor: n-resize;    
    border-top: 5px solid purple;
}

ui-resizable-e {
    cursor: e-resize;    
    border-right: 5px solid purple;
}