Question

我正在尝试使用此代码将元素放置在随机位置，但它只是将元素放在容器元素的顶部。我做错了什么？

   create: function(){

    console.log("cone created");

    var el =  document.createElement('div');
    el.classList.add('cone');

    this.container.appendChild(el);

    this.el = el;

    this.x = Math.random () * canvas.innerWidth + 'px';
    this.y = Math.random () * canvas.innerHeight + 'px';

    },

Answer 1

我假设“画布”不是真正的画布，它只是<div>。

在这种情况下，您需要做几件事：

确保您的容器有position:relative
确保您的容器的孩子有position:absolute
添加el.style.left = this.x; el.style.top = this.y;以实际定位元素

Answer 2

使用内联css插入div可以处理这个问题。

我写了一个样本：

$(document).ready(function() {
  var sqrPixel = 10;

  var posX = 30;
  var posY = 100;

  $('body').append('<div style="background: #ccc; box-shadow: 2px 2px 2px #000; position: absolute; width: ' + sqrPixel + 'px; height: ' + sqrPixel + 'px; left: ' + posX + '; top: ' + posY + ';"></div>');
});

我将方块附加到body。如果你愿意，可以改变它。您可以随意设置posX和posY。

我知道它看起来有点乱，但至少它对我有用。

将元素放置在随机位置

2 个答案: