爲什麼這些元素沒有出現在隨機的地方，但他們保持對齊的頂部？

代碼應該一個一個地生成5個元素，這樣當下載頁面時，我們將在隨機地方看到5個元素（newFace）。爲什麼這些元素沒有出現在隨機的地方，但他們保持對齊的頂部？

此代碼生成的所有5個元素，但他們是住一個對齊，而不是在隨機位置出現如希望

function generate_faces() { 
    var theLeftSide = document.getElementById("leftSide"); 
    var number_of_faces = 0; 
    while (number_of_faces < 5){ 
     var top_position = Math.floor(Math.random()*300); 
     var left_position = Math.floor(Math.random()*300); 
     newFace = document.createElement("img"); 
     newFace.setAttribute(
      "src", 
      "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
     ); 
     newFace.style.top = top_position+"px"; 
     newFace.style.left = left_position+"px"; 
     theLeftSide.appendChild(newFace); 
     number_of_faces = number_of_faces + 1; 
    } 
}

來源

2016-06-10 Daria Ivanova

是「left side」定位的相對位置，img絕對有些地方？ – JonSG

leftSide和img都在css中絕對定位（任務告訴他們必須具有position：absolute） –

您可以製作一個[可執行的Stack Snippet]（http://meta.stackoverflow.com/questions/270944/feedback-請求堆棧片段-2-0），證明了這個問題？ – Barmar

試試這一個。

<!DOCTYPE html> 
<html> 
<head></head> 
<style> 
html, body, leftSide { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
#leftSide { 
    position: relative; 
} 

#leftSide img { 
    position: absolute; 
} 
</style> 
<body onclick="generate_faces()"> 
<div id="leftSide"> 

</div> 
</body> 
</html> 
<script> 
function generate_faces() { 

var theLeftSide = document.getElementById("leftSide"); 
var number_of_faces = 0; 
while (number_of_faces < 5){ 
    var top_position = Math.floor(Math.random()*300); 
    var left_position = Math.floor(Math.random()*300); 
    newFace = document.createElement("img"); 
    newFace.setAttribute(
     "src", 
     "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
    ); 
    newFace.style.top = top_position+"px"; 
    newFace.style.left = left_position+"px"; 
    theLeftSide.appendChild(newFace); 
    number_of_faces = number_of_faces + 1; 
    } 
} 
</script>

來源

2016-06-10 19:32:50

爲什麼這些元素沒有出現在隨機的地方，但他們保持對齊的頂部？

回答

相關問題