用JS动态生成图片答案

【问题标题】：Dynamic generation of images with JS用JS动态生成图片
【发布时间】：2017-05-28 03:12:09
【问题描述】：

作为 Coursera 练习的一部分，我试图在 <div> 的 5 个不同位置展示同一张照片。虽然我用absolute定位，但是所有的照片好像都叠在了一起。

这是我尝试在 body 标记中使用的代码：

      <div id="leftside"></div>
      <script type="text/javascript">
      var theLeftSide = document.getElementById("leftside");
      function generateFaces(){
        for (var i = 0; i < 5; i++) {
          photo = document.createElement("img");
          photo.src ="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
              topPosition = Math.floor(Math.random()*401);
              leftPosition = Math.floor(Math.random()*401);
              photo.style.top =topPosition;
              photo.style.left =leftPosition;
              theLeftSide.appendChild(photo);
              console.log(i, topPosition, leftPosition);
            } // for
          } // function
          window.onload = generateFaces();
</script>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你在位置上遗漏了单位。如果您只提供数字，则会被忽略

尝试更改为：

var  topPosition = Math.floor(Math.random()*401) +'px';
var  leftPosition = Math.floor(Math.random()*401) +'px';
                                                 // ^^ units needed

var theLeftSide = document.getElementById("leftside");

function generateFaces() {
  for (var i = 0; i < 5; i++) {
    var photo = document.createElement("img");
    photo.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    var topPosition = Math.floor(Math.random() * 401) + 'px';
    var leftPosition = Math.floor(Math.random() * 401) + 'px';
    //console.log()
    photo.style.top = topPosition;
    photo.style.left = leftPosition;
    theLeftSide.appendChild(photo);
    console.log(i, topPosition, leftPosition);
  } // for
} // function
window.onload = generateFaces;

img {
  position: absolute
}

&lt;div id="leftside"&gt;&lt;/div&gt;

还要注意window.onload = generateFaces(); 不正确。您想将函数作为参考传递，而不是调用它....window.onload = generateFaces;

【讨论】：

【解决方案2】：

父元素（或某些祖先）必须至少有position: relative，它的子元素position 才能工作。

在这个答案中得到了充分的解释：Absolute positioning and its parent element

将此样式添加到您的对象中：

<div id="leftside" style='position: relative;'></div>

【讨论】：

true 但如果没有祖先有位置，它们将被绝对放置在文档中...不堆叠