如何使我的随机生成的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;    
}

So currently I need my point() function to generate a random div within the <div id="wrapper"> which it is but after a few different spawns, does not stay within the wrapper div eventually. It seems like the container of the point() seems to be shifting down. The more that is generated the more often it appears to the bottom and outside of the container.

Eventually my idea is for all of them to have the same top and left original positions in that way I could use my player and player2 to touch them (match left and top positions) and make them disappear like they are being collected like points. I also cant get them to have the same origin point. I think these issues might be related

Answer 1

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

z-index: 0

Answer 2

Try adding absolute positioning to your wrapper div and relative positioning to the container div:

#container {
  position: relative;
}

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

This takes the div out of normal flow from the rest of the document.

See here for more explanations on why this works.