Почему элементы не отображаются в случайных местах, но они остаются выровненными поверх div?

Код должен генерировать 5 элементов по одному, чтобы при загрузке страницы все мы увидим 5 элементов (newFace) в случайных местах.Почему элементы не отображаются в случайных местах, но они остаются выровненными поверх div?

Этот код генерирует все 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

является «левым», расположенным относительно, img абсолютным местом? – JonSG

leftSide и img оба позиционируются как абсолютные в css (задача говорит, что они должны иметь положение: абсолютное) –

Можете ли вы сделать [исполняемый фрагмент стека] (http://meta.stackoverflow.com/questions/270944/feedback- request-stack-snippets-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

Почему элементы не отображаются в случайных местах, но они остаются выровненными поверх div?

ответ

Смежные вопросы