css - 使用 JavaScript 生成的 div 的 CSS 定位无法按我的预期工作

Question

首先，我必须道歉。CSS定位一直是我存在的祸根，这很可能是我完全错过的简单事情......

无论如何，我有一个生成 div 的 JS 脚本。每个 div 都在绝对定位的父级 #container 内。下面的CSS：

#container{
  position: absolute;
}
#container div{
  position: relative;
}

创建 div 的函数是：

function newLine(){
  var id_num = ++line;
  var _new;
  var i;
  for(i = 0; i < width; i++){
    _new = document.createElement('div');
    _new.innerHTML = randomChar();
    _new.id = id_num;
    _new.style.left = i*10+'px';
    _new.style.top = 0;
    document.getElementById('container').appendChild(_new);
  }
}

以上所有内容均已正确初始化。左侧定位完美。唯一的问题是垂直定位。它们不是彼此相邻显示的所有行，而是从 div 的顶部逐渐增加。我敢肯定这是我正在完全查看的微不足道的事情，但我很难过......非常感谢帮助！

Answer 1

行为position: relative- 这会将它们静态布局，然后将它们移动指定数量的像素。你想使用absolute定位。