Warum erscheinen die Elemente nicht an zufälligen Orten, aber sie bleiben auf dem Div ausgerichtet?

Der Code soll 5 Elemente nacheinander erzeugen, so dass wir beim Herunterladen der Seite 5 Elemente (newFace) an zufälligen Stellen sehen.Warum erscheinen die Elemente nicht an zufälligen Orten, aber sie bleiben auf dem Div ausgerichtet?

Dieser Code generiert alle fünf Elemente, aber sie bleiben wie gewünscht

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; 
    } 
}

Quelle

2016-06-10 Daria Ivanova

ist die "leftSide" relativ positioniert, die img absolute ein Ort? – JonSG

leftSide und img sind beide absolut in css positioniert (die Aufgabe hat gesagt, dass sie position: absolute haben müssen) –

Können Sie ein [ausführbares Stack Snippet] machen (http://meta.stackoverflow.com/questions/270944/feedback- request-stack-snippets-2-0), die das Problem demonstriert? – Barmar

Try this eins nach dem anderen, anstatt ausgerichtet in einer zufälligen Position erscheinen.

<!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>

Quelle

2016-06-10 19:32:50

Warum erscheinen die Elemente nicht an zufälligen Orten, aber sie bleiben auf dem Div ausgerichtet?

Antwort

Verwandte Themen