如何用JavaScript和CSS实现Div元素随机分布？排障求助

问题原因 #

生成的Div元素全部挤在一行，核心原因有两点：

• 承载生成元素的.box容器未设置position: relative，导致绝对定位（position: absolute）的子元素以更外层的.animation-container为定位参考，而非预期的.box。
• .box在Flex容器中未设置宽高，无法占满父容器空间，进一步导致子元素布局异常。

修复步骤 #

1. 调整CSS，给.box添加定位与宽高 #

在CSS中为.box补充以下样式，让它成为子元素的定位上下文，并占满父容器：

.box {
  position: relative;
  width: 100%;
  height: 100%;
}

2. 修复JavaScript全局变量问题 #

循环变量i未声明会造成全局变量污染，修改循环语句为：

for(let i=0;i<=60;i++){
  // 原有代码保持不变
}

完整代码示例 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="/script.js" async></script>
</head>
<body>
  <div class="animation-container">
    <div class="box"></div>
    <button class="button">click me</button>
  </div>
</body>
</html>

CSS代码

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation-container{
  border: 2px solid black;
  width: 70vw;
  height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  /* overflow: hidden; */
}
.box{
  position: relative;
  width: 100%;
  height: 100%;
}

JavaScript代码

const backgroundColor = document.querySelector('.box')
function createDiv(){
  for(let i=0;i<=60;i++){
    var newdiv = document.createElement('div')
    newdiv.classList = `name${i}`
    const percentage = Math.floor(Math.random() * 100)
    const distance = Math.floor(Math.random() * 60)
    const a = Math.floor(Math.random() * 255)
    const b = Math.floor(Math.random() * 255)
    const c = Math.floor(Math.random() * 255)
    const d = Math.random().toFixed(1)
    newdiv.style.right = `${percentage}%`
    newdiv.style.borderRadius = '50%'
    newdiv.style.bottom = `${percentage}%`
    newdiv.style.backgroundColor = `rgba(${a},${b},${c},${d})`;
    newdiv.style.width = `${distance}px`
    newdiv.style.position = 'absolute'
    newdiv.style.height = `${distance}px`
    backgroundColor.append(newdiv)
  }
}
createDiv()

修改后，生成的圆形元素会随机分散在指定容器内，不再挤在一行。

内容的提问来源于stack exchange，提问作者denis kiplangat