使用 css 位置更改元素的位置：绝对

Question

我有 6 个按钮元素，其 css 位置：绝对，并且我尝试使用 css“左”样式来定位它们。为什么这段代码不起作用？它们都堆放在左上角。我假设这与我的 javascript 有关。var i;for (i = 0; i < document.getElementsByTagName("button").length; i++) {  document.getElementsByTagName("button")[i].style.left = "'" + String(Math.floor(Math.random() * 600)) + "px'";}.game button {  display: inline;  position: absolute;}<div class="game" id="divi"><button class="game"></button><button class="game"></button><button class="game"></button><button class="game"></button><button class="game"></button><button class="game"></button></div>如果您知道一种方法可以让按钮在没有绝对位置的情况下完全不相互交互，请告诉我。

Answer 1

您不需要额外的引号：

var i;

for (i = 0; i < document.getElementsByTagName("button").length; i++) {

  document.getElementsByTagName("button")[i].style.left = String(Math.floor(Math.random() * 600)) + "px";

}

.game button {

  display: inline;

  position: absolute;

}

<div class="game" id="divi">

<button class="game"></button>

<button class="game"></button>

<button class="game"></button>

<button class="game"></button>

<button class="game"></button>

<button class="game"></button>

</div>

Answer 2

使用此 CSS，所有这些按钮将相互覆盖，位于屏幕的左上角。尝试这个：

.game button {

  left: 10px;

  display: inline;

  position: absolute;

  padding-top: 10px;

}