分区'；当使用JavaScript定位元素时，它对样式没有响应

我正在尝试使用嵌套for循环创建一个“网格”。当我在浏览器中检查元素时，它们接收到我提供给它们的样式，但实际上它们并没有被定位。即使我在加载JS后手动更改浏览器中的css，它们也不会改变位置

另外，如果我改用css网格，这个问题会得到更好的解决吗

var nodeList = document.querySelectorAll('.square');
const nodeArray = [].slice.call(nodeList);
for (let i = 0; i < 3; i++){
  for (let j = counter; j < (counter + 3); j++){
    nodeArray[j].style.right = leftPos.toString() + "%";
    nodeArray[j].style.top = topPos.toString() + "%";
    nodeArray[j].style.background = 'red';
    nodeArray[j].style.width = '30%';
    nodeArray[j].style.height = '30%';
    leftPos += 33;
  }
  counter += 3;
  leftPos = 0;
  topPos += 33;
 }
}
/*there are 9 div's with class square*/

var nodeList=document.queryselectoral（'.square'）；
const noderray=[].slice.call（节点列表）；
for（设i=0；i<3；i++）{
对于（设j=计数器；j<（计数器+3）；j++）{
nodeArray[j].style.right=leftPos.toString（）+“%”；
noderRay[j].style.top=topPos.toString（）+“%”；
noderRay[j].style.background='red'；
nodeArray[j].style.width='30%'；
noderRay[j].style.height='30%'；
leftPos+=33；
}
计数器+=3；
leftPos=0；
topPos+=33；
}
}
/*有9个班级广场*/

也许你忘了在CSS上设置

.square{position:absolute；}

， 有了完整的HTML、CSS和JavaScript，我们可以提供帮助

const
nodeList=document.queryselectoral（“.square”）
让
计数器=0，
leftPos=0，
topPos=0
for（设i=0；i<3；i++）{
nodeList.forEach（e=>{
e、 style.right=`${leftPos}%`
e、 style.top=`${topPos}%`
e、 style.background='red'
e、 style.width='30%'
e、 style.height='30%'
leftPos+=33
})
计数器+=3
leftPos=0
托普斯+=33
}

.square{
位置：绝对位置；
颜色：#fff；
}

Foo
酒吧
福
酒吧
福
酒吧
Foo

他们是

立场：绝对的

？我会投票支持css网格方法，而不是使用自定义js。我也会说使用css网格。Javascript将其样式添加为内联属性。内联样式始终优先于其他样式。（除了！重要）。或者，如果这不是你要问的，那么确保正方形有一个

位置：绝对

，并且在一个div内，位置：相对，就像@BenWest建议的那样。