如何让我的随机生成的div出现在容器div内？

Question

HTML

<div id="container"> 
     <div id="wrapper"> 

     </div> 
     <span id = "waveNum">Current Wave: 0</span> 
     <input type = "button" value = "Start Game" onclick = "startGame()"></input> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
    <script src="main.js"></script> 
    </body> 

的Javascript

var keyArray = []; 
var currentWave = 1; 


var player; 
var player2; 
function initiate(){ 
    player = new createPlayer(150,50,"player1","relative","blue"); 
    player2 = new createPlayer(150,0,"player2","relative","green"); 
} 

function startGame() { 
    point(); 
} 

function createPlayer(l,t,id,pos,color){ 
    this.speed = 3; 
    this.width = 25; 
    this.height = 25; 
    this.left = l; 
    this.top = t; 
    this.id = id; 
    this.model = $("<div id=" + id + "/>") 
     .css({"backgroundColor":color,"height":this.height,"width":this.width, 
      "left":this.left,"top":this.top,"position":pos}) 

    $('#wrapper').append($(this.model)); 
} 

function point(){ 
    leftP = parseInt(Math.random()*970); 
    topP = parseInt(Math.random()*580); 
    $points = $("<div class=point/>") 
    .css({"backgroundColor":"yellow","height":"10px","width":"10px","left":0, 
     "top":0,"position":"relative"}) 
    $('#wrapper').append($points) 
} 



function update(){ 
    //left 
    if(keyArray[65]){ 
     var newLeft = parseInt(player.left)-player.speed+"px" 
     player.left = newLeft; 
     document.getElementById(player.id).style.left = newLeft; 
    } 
    //right 
    if(keyArray[68]){ 
     var newLeft = parseInt(player.left)+player.speed+"px" 
     player.left = newLeft; 
     document.getElementById(player.id).style.left = newLeft; 
    } 
    //up 
    if(keyArray[87]){ 
     var newTop = parseInt(player.top)-player.speed+"px" 
     player.top = newTop; 
     document.getElementById(player.id).style.top = newTop; 
    } 
    //down 
    if(keyArray[83]){ 
     var newTop = parseInt(player.top)+player.speed+"px" 
     player.top = newTop; 
     document.getElementById(player.id).style.top = newTop; 
    } 

    //player2 
    //left 
    if(keyArray[37]){ 
     var newLeft = parseInt(player2.left)-player2.speed+"px" 
     player2.left = newLeft; 
     document.getElementById(player2.id).style.left = newLeft; 
    } 
    //right 
    if(keyArray[39]){ 
     var newLeft = parseInt(player2.left)+player2.speed+"px" 
     player2.left = newLeft; 
     document.getElementById(player2.id).style.left = newLeft; 
    } 
    //up 
    if(keyArray[38]){ 
     var newTop = parseInt(player2.top)-player2.speed+"px" 
     player2.top = newTop; 
     document.getElementById(player2.id).style.top = newTop; 
    } 
    //down 
    if(keyArray[40]){ 
     var newTop = parseInt(player2.top)+player2.speed+"px" 
     player2.top = newTop; 
     document.getElementById(player2.id).style.top = newTop; 
    } 
    blockade(); 
    requestAnimationFrame(update); 
} 

function blockade(){ 
    var elemLeft = parseInt($('#wrapper').css('left')); 
    var elemWidth = parseInt($('#wrapper').css('width')); 
    var elemTop= parseInt($('#wrapper').css('height')); 
    //blocks players from moving outside of game 
    if(parseInt(player.left) + player.width >= elemLeft+elemWidth){ 
     player.left = elemWidth - player.width - 2; 
    } 
    if(parseInt(player.top) + player.height >= elemTop){ 
     player.top = elemTop - player.height - 2; 
    } 
    if(parseInt(player.top) < 3){ 
     player.top = 3; 
    } 
    if(parseInt(player.left) < 3){ 
     player.left = 3; 
    } 
    if(parseInt(player2.left) + player2.width >= elemLeft+elemWidth){ 
     player2.left = elemWidth - player2.width - 2; 
    } 
    if(parseInt(player2.top) + player2.height >= elemTop){ 
     player2.top = elemTop - player2.height - 2; 
    } 
    if(parseInt(player2.top) < 3){ 
     player2.top = 3; 
    } 
    if(parseInt(player2.left) < 3){ 
     player2.left = 3; 
    } 
} 

window.onkeydown = function(page){ 
    keyArray[page.keyCode] = page.type === 'keydown'; 
} 
    window.onkeyup = function(page){ 
     keyArray[page.keyCode] = page.type === 'keydown' 
} 

CSS

html, body {margin: 0; height: 100%; overflow: hidden} 

#container{ 
    width:80%; 
    height:60%; 
    display: block; 
    text-align:center; 
    margin: 0 auto; 
} 
#wrapper{ 
    left:0px; 
    width:1000px; /* 100% */ 
    height:600px; 
    border:1px solid lime; 
    margin:0 auto; 
    background-color:black; 
} 

#player1, .point { 
    float: left; 
    clear: both; 
} 
body{ 
    background-color:black; 
} 
#waveNum{ 
    color:white; 
    font-size:200%; 
} 

.point { 
    overflow: auto;  
} 

所以目前我需要我的point()函数生成<div id="wrapper">它是内，但几个不同的产卵后随机DIV ，最终不会留在包装div中。看起来像point()的容器似乎正在向下移动。产生的越多，容器底部和外部看起来越频繁。

最后，我的想法是让所有的人有那样的相同的顶部和左侧的原始位置，我可以用我的player和player2触摸它们（比赛左边和顶部位置），让他们像消失正在收集他们像点。我也不能让他们有相同的原点。我认为这些问题可能与

Answer 1

您可以使用，使出现特定的div

z-index: 0 

Answer 2

尝试增加绝对定位到您的包装股利和相对定位的div容器：

#container { 
    position: relative; 
} 

#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

这将div从文档的其余部分中取出正常流。

请参阅here了解更多关于此原因的说明。