Javascript 具有绝对位置的动态添加元素不会随父元素流动

我正在玩JavaScript。我对页面大小和动态创建元素的位置有问题。父div的位置是相对的，附加的子元素相对于它们添加到的父元素是绝对的。当我收缩浏览器窗口时，父对象缩放正常，但子对象的位置不会更新。在现实世界中，你会如何处理这样的情况？ 谢谢 PS：请记住，我正在努力学习这一点，我相信很多都是错误的或不必要的。我也感谢你的纠正

#第一组{
职位：亲属；
保证金：自动；
高度：400px；
宽度：400px；
背景色：黑色；
}
document.getElementById（“div1”）.addEventListener（“单击”，createchild，false）；
函数createchild（e）
{
obj1=新的子项（此，e）；
}
功能子（el，e）
{
this.parent=el；
this.parentID=el.id；
//创建对象
this.child=document.createElement（'div'）；
this.parent.appendChild（this.child）；
//设置一些属性
var c=this.parent.childElementCount+1；
this.child.id=“child”+c；
//设置一些样式
var l=e.clientX-20；
var t=e.clientY-20；
var stylestring=“位置：绝对；顶部：“+t+”px；左侧：“+l+”px；高度：40px；宽度：40px；背景色：红色；”；
this.child.style.cssText=stylestring；
//添加一些事件处理
this.child.addEventListener（“单击”，getchildcoords，false）；
}
函数getchildcoords（e）
{
警报（this.id）；
e、 停止传播（）；
}

• #div1 css的'position'关键字中缺少'i'
• 将新div附加到容器本身以链接它们的位置
• 使用offsetX、offsetY进行正确放置

#第一组{
位置：相对位置；
保证金：自动；
高度：400px；
宽度：400px；
背景色：黑色；
}
document.getElementById（“div1”）.addEventListener（“单击”，createchild，false）；
函数createchild（e）
{
obj1=新的子项（此，e）；
}
功能子（el，e）
{
this.parent=el；
this.parentID=el.id；
//创建对象
this.child=document.createElement（'div'）；
//设置一些属性
var c=this.parent.childElementCount+1；
this.child.id=“child”+c；
//设置一些样式
var l=e.offsetX-20；
var t=e.offsetY-20；
var stylestring=“位置：绝对；顶部：“+t+”px；左侧：“+l+”px；高度：40px；宽度：40px；背景色：红色；”；
this.child.style.cssText=stylestring；
el.appendChild（这个孩子）；
//添加一些事件处理
this.child.addEventListener（“单击”，getchildcoords，false）；
}
函数getchildcoords（e）
{
警报（this.id）；
e、 停止传播（）；
}

您只需设置一次位置。如果要更改位置，则需要使用相对值或再次设置值（可以在

window.resize（）

事件中执行此操作）。绝对定位对响应性不是很好，因为它不会自动更新。如果可以的话，我会避免的。如果不是，则必须侦听调整大小事件并手动更新其位置，当您设置父元素不存在的位置时，这可能会变得非常复杂，即可能是静态的，换句话说可能是绝对的或相对的。因此，当你调整窗口大小时，元素也会相应地工作。谢谢，你能解释一下“链接它们的位置”吗。我将尝试偏移。我猜我在谷歌上搜索鼠标事件和位置时走错了方向。哦，我想我明白了。但请纠正我。父母是独生子女？所以不应该有附加子对象的实例？我注意到您在设置了所有属性之后附加了它。但在事件处理程序之前。还有一个问题。我用记事本。你能推荐一个好的工作室吗？也许是一个能抓住我糟糕的打字和拼写问题的工作室。也许就像Intellisense在VS.远离记事本。我使用vim和idea。我建议使用更容易启动的Idea，它在代码辅助/格式设置方面具有强大的功能。