jQuery-UI的可调整大小取消位置：固定

Question

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

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

这是罚款，直到我想使<ul>调整大小。由于某种原因，当我将jQuery-UI的可调整大小添加到<ul>时，它会抵消修正，因此<ul>会卡住整个页面的底部而不是窗口。我怎样才能解决这个问题？

请注意我试过接受解决方案here，但是当我尝试它时，虽然盒子确实留在窗口中，但当我试图调整它的大小时，随着尺寸的增加，整个东西都会漂浮起来。由于某种原因，它将顶部和高度联系在一起，所以它们都会在调整大小时改变。

的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" ] 
} 

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;从我添加的新容器中将其换成顶层：80％！重要; 的代码看起来是这样的：

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