Javascript 如何使小div靠近可调整大小的容器边框？

用我所拥有的更容易解释：

我的目标是使所有四个彩色框与虚线框的每个角保持相同的距离（每个方向10像素）。当边界框是静态的时，这很容易，但在我的例子中，它将由用户调整大小，其中一种方法是使用滑块

具体来说，当边界框变大时，我会尝试让绿色向右滑动，蓝色向下滑动，黄色对角向下向右滑动

我的朋友建议使用

position:absolute

，但它并不能满足我的需要。以灰色框显示，它们附着在整个窗口上

我做到了：

我使用了而不是

top:10px

bottom:10px

---

我不太确定灰框应该如何反应，所以我没有更改它们的属性…

如果您想单独使用Jquery，这就是您应该做的

function resize(px) {
    $(".colorbox").css("width", px+"px");
    $(".colorbox").css("height", px+"px");
    $("#g").css("margin-left", px-100+"px");
    $("#b").css("margin-top", px-100+"px");     
    $("#y").css("margin-left", px-100+"px");
  }

---

哦，所以容器必须是绝对的。非常感谢。几分钟后我会接受的。