jQuery-UI 可调整大小否定位置：固定

Question

我正在创建一个示例 chrome 扩展，在其中我将一个小的 <ul> 注入到页面中。它应该坐在窗口的左下角，所以我给了它

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

这很好，直到我想让<ul> 可调整大小。出于某种原因，当我将 jQuery-UI 的可调整大小添加到 <ul> 时，它否定了固定，所以 <ul> 被卡在整个页面的底部而不是窗口的底部。我该如何解决这个问题？

请注意我已经尝试了接受解决方案here，但是当我尝试它时，虽然框确实留在了窗口中，但当我尝试调整它的大小时，随着大小的增加，整个东西都会浮起来。出于某种原因，它将顶部和高度联系在一起，因此它们都会在调整大小时发生变化。

ma​​nifest.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" ]
}

resize.js：

$(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);
});

style.css：

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

Answer 1

正如我所说的解决方案here，对我来说并不完美，但它很接近。我不得不取出底部：0；从我添加的新容器中将其交换为 top: 80% !important; 代码如下所示：

resize.js：

$(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);
});

style.css：

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