Javascript 如何确定div标签的位置？

我正在为我的项目创建一个交互式元素周期表

这看起来很好，但只要我改变分辨率，右边的元素就会散落在整个页面上，一切都变得一团糟。

以下是片段：-

功能镧系元素（）{
var elements1=document.getElementsByClassName（'lanthanoids'）；
var i，边际收益=-70；
对于（i=0；i=28）{
$（'氢，'氦，'氖'）.css（“背景色”，“红色”）；
}
如果（val>=56）{
$（'氧，'氟'）.css（“背景色”，“蓝色”）；
}
如果（val>=84）{
$（'氮'）.css（“背景色”，“红色”）；
$（'#argon'）.css（“背景色”、“蓝色”）；
}
如果（val>=112）{
$（“#氢、#氦、#氖、#氧、#氟、#氮、#氩”）.css（“背景色”、“红色”）；
}
如果（val>=140）{
$（'氪'）.css（“背景色”，“红色”）；
}
}
window.addEventListener（'load'，镧系元素，false）；
window.addEventListener（'load'，Actinoids，false）；
window.addEventListener（'load'，TypesPover，false）；
window.addEventListener（'load'，Slider，false）
*{
文本对齐：居中；
}
a{
颜色：黑色；
文字装饰：无；
}
a:悬停{
颜色：蓝色；
}
img{
可见性：隐藏；
显示：内联；
位置：绝对位置；
左边距：70px自动；
右边距：70px自动；
}
身体{
背景色：#eafeef；
}
p{
字号：5px；
利润上限：-40px；
字母间距：-1px；
}
氢{
线高：60px；
}
段落{
字体大小：10px；
字母间距：0px；
线高：20px；
文本对齐：居中；
}
em{
字体大小：粗体；
@media only screen and (min-width : 768px) {

    #metalloids {
        height: 15px;
        width: 66px;
    }

}

@media only screen and (min-width : 992px) {

    #metalloids {
        height: 30px;
        width: 109px;
    }

}