在javascript中占据顶部和左侧位置并转换为百分比

我有一个方形区域，可以捕捉鼠标点击，并在当前位置添加一个新的div。 我的目标是采取那些最重要的措施：Ypx；左：Xpx；使用javascript将坐标转换为百分比，因为正方形区域将在不同页面上设置为不同的大小

我现在的例子

//效果的当前js（使用主干事件的点击事件中的一些小差异）
$（“.div_容器”）。单击（函数（e，ui）{
var parentOffset=$（this.offset（）；
var=（e.pageX-parentOffset.left）；
var relativeYPosition=（e.pageY-parentOffset.top）；
$（“.div_container”）。追加（“”）；
});

编辑：

---

我希望能够将顶部和左侧的位置作为百分比保存到我的数据库中，我不知道如何计算，也不知道从哪里开始计算。

您可以使用以下代码计算百分比：

var $this = $(this), offset = $this.offset(),
    width = $this.innerWidth(), height = $this.innerHeight();
var parentOffset = $(this).offset();         
var relativeXPosition = (e.pageX - parentOffset.left),
    percentx = relativeXPosition/width;
var relativeYPosition = (e.pageY - parentOffset.top),
    percenty = relativeYPosition/height;

---

但我认为你确实想从相对定位转变为绝对定位。当你玩小提琴多次点击时，附加的div开始碰撞并破坏彼此的位置。

我不知道你到底在做什么。你可以用CSS

position:absolute放置你的“图标”

not

relative

不起作用的div将位于页面中的任何位置。我在这里的目标是将这些顶部和左侧位置从像素转换为百分比，这在上面的段落中已经明确说明。

var $this = $(this), offset = $this.offset(),
    width = $this.innerWidth(), height = $this.innerHeight();
var parentOffset = $(this).offset();         
var relativeXPosition = (e.pageX - parentOffset.left),
    percentx = relativeXPosition/width;
var relativeYPosition = (e.pageY - parentOffset.top),
    percenty = relativeYPosition/height;