Javascript 如何将任何坐标转换为相对div位置？

我正在尝试使用HTML、CSS和Javascript解决以下问题，但仍然找不到解决方案：

假设我有一个外盒div，我想在其中找到一个内盒div。 我的意见是：

x坐标-介于0和最大值之间

y坐标-介于0和最大y值之间

（x，y）表示内框的左上角

我想将x，y坐标标准化到 外面的盒子。 这样（MAX_X_值、MAX_Y_值）将被转换到外框的右下角

我尝试使用绝对定位，并在“顶部”和“左侧”中使用%单位。 这样，如果我得到（MAX_X_值，MAX_Y_值），将放置内部框 在外盒子外面

解决这个问题的正确方法是什么？我如何限制它 内框将保持在外框的边界内

以下是我的代码片段：

CSS

.outer-box {
  margin-left: 25%;
  height: 100%;
  position: relative;
}

.inner-box {
  width: 8vw;
  height: 6vw;
  border: 5px solid white;
  box-shadow: 0.3em 0.3em 5px gray;
  position: absolute;
}

Javascript

innerBoxElement.style.left = `${Math.floor(x / MAX_X_VALUE* 100)}%`;
innerBoxElement.style.top = `${Math.floor(y / MAX_Y_VALUE* 100)}%`;
outerBoxElement.insertAdjacentElement('afterbegin', innerBoxElement);

---

提前谢谢

您可以调用任何元素以获取其相对于浏览器窗口左上角的绝对位置和尺寸。创建了一个并找到了正确的公式：惊人！非常感谢你！只有一个问题-当我尝试在内部框上执行getBoundingClientRect（）时，只得到0个值。你能假设为什么吗？从代码的最后一行判断，你是在动态地插入内部框吗？除非元素是DOM的一部分（即插入到实际文档中），否则无法对其进行度量。在这种情况下，由于框使用

8vw

/

6vw

，因此可以使用

0.08*window.innerWidth

确定其最终宽度。高度也一样，很好，发现了问题。非常感谢@ChrisG。