Fix div position with respect to another div when zoom
<p>I have the following HTML. The problem is that I can not make the div with id="ladder" have the same position with respect to its parent div with id="grid" when I zoom in or out. here is the code <a href="http://jsfiddle.net/safaasalem/2x9addLt/" rel="nofollow">snakes and Ladders</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var gameBoard = {
  createBoard: function(dimension, mount) {
    var mount = document.querySelector(mount);
    if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
      return false;
    } else {
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
      var table = document.createElement('table'),
        row = document.createElement('tr'),
        cell = document.createElement('td'),
        rowClone,
        cellClone;
      var output;
      for (var r = 0; r &lt; dimension; r++) {
        rowClone = row.cloneNode(true);
        table.appendChild(rowClone);
        for (var c = 0; c &lt; dimension; c++) {
          cellClone = cell.cloneNode(true);
          rowClone.appendChild(cellClone);
        }
      }
      mount.appendChild(table);
      output = gameBoard.enumerateBoard(table);
    }
    return output;
  },
  enumerateBoard: function(board) {
    var rows = board.getElementsByTagName('tr'),
      text = document.createTextNode(''),
      rowCounter = 1,
      size = rows.length,
      cells,
      cellsLength,
      cellNumber,
      odd = false,
      control = 0;
    for (var r = size - 1; r &gt;= 0; r--) {
      cells = rows[r].getElementsByTagName('td');
      cellsLength = cells.length;
      rows[r].className = r % 2 == 0 ? 'even' : 'odd';
      odd = ++control % 2 == 0 ? true : false;
      size = rows.length;
      for (var i = 0; i &lt; cellsLength; i++) {
        if (odd == true) {
          cellNumber = --size + rowCounter - i;
        } else {
          cellNumber = rowCounter;
        }
        cells[i].className = i % 2 == 0 ? 'even' : 'odd';
        cells[i].id = cellNumber;
        cells[i].appendChild(text.cloneNode());
        cells[i].firstChild.nodeValue = cellNumber;
        rowCounter++;
      }
    }
    var lastRow = rows[0].getElementsByTagName('td');
    lastRow[0].id = '100';
    var firstRow = rows[9].getElementsByTagName('td');
    firstRow[0].id = '1';
    return gameBoard;
  }
};
gameBoard.createBoard(10, "#grid");

function intialPosition() {
  $("#1").append($("#player1"));
  $("#1").append($("#player2"));
  var currentPosition = parseInt($("#1").attr('id'));
  return currentPosition;
}
var start = intialPosition();

var face1 = new Image();
face1.src = "http://s19.postimg.org/fa5etrfy7/image.gif";
var face2 = new Image();
face2.src = "http://s19.postimg.org/qb0jys873/image.gif";
var face3 = new Image();
face3.src = "http://s19.postimg.org/fpgoms1vj/image.gif";
var face4 = new Image();
face4.src = "http://s19.postimg.org/xgsb18ha7/image.gif";
var face5 = new Image();
face5.src = "http://s19.postimg.org/lsy96os5b/image.gif";
var face6 = new Image();
face6.src = "http://s19.postimg.org/4gxwl8ynz/image.gif";

function rollDice() {
  var status = document.getElementById("status");
  var random = Math.floor(Math.random() * 6) + 1;
  document.images["mydice"].src = eval("face" + random + ".src")
  status.innerHTML = "You rolled " + random;
  //if (random == 6) {
  //    status.innerHTML += "! You get a free turn!!";
  //}
  return random;
}
var currentPosition = start;
var random1;

function move() {
  var m = 1;
  random1 = rollDice();
  destination = currentPosition + random1;
  $('#' + destination).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
  $('#' + destination).append($('#player' + m));
  if (destination == 36) {
    destination = 55;
    $('#' + destination).append($('#' + "player" + m));
  }
  if (destination == 96) {
    destination = 57;
    $('#' + destination).append($('#' + "player" + m));
  }
  if (destination &gt;= 100) {
    destination = 100;
    $('#' + destination).append($('#' + "player" + m));
    alert("You Won!!!!!!!");
  }
  currentPosition = parseInt($('#' + destination).attr('id'));
  return currentPosition;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*body {
    background-image: url('snakesandladder2.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #4f96cb;
}*/

#game {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: table;
}
#gameBoardSection {
  border: 3px inset #0FF;
  border-radius: 10px;
  width: 65%;
  display: table-cell;
  position: relative;
  /*margin: 5px;*/
  /*margin: auto;*/
}
/*#grid{
    position:relative;
}*/

table {
  width: 100%;
  position: relative;
}
td {
  border-radius: 10px;
  width: 60px;
  height: 60px;
  line-height: normal;
  vertical-align: bottom;
  text-align: left;
  border: 0px solid #FFFFFF;
  position: relative;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
  /*color: #FF0000 ;*/
  background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
  background-color: SkyBlue;
}
#100 {
  background-image: url('rotstar2_e0.gif');
  background-repeat: no-repeat;
  background-size: 100%;
}
#ladder {
  position: absolute;
  top: 300px;
  left: 470px;
  -webkit-transform: rotate(30deg);
  z-index: 1;
  opacity: 0.7;
}
#bigSnake {
  position: absolute;
  top: 20px;
  left: 200px;
  opacity: 0.7;
  z-index: 1;
}
#playerAndDiceSection {
  background-color: lightpink;
  border: 1px;
  border-style: solid;
  display: table-cell;
  /*margin: 2px;*/
  border-radius: 10px;
  border: 3px inset #0FF;
  width: 35%;
  margin: 2%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="game"&gt;
    &lt;div id="gameBoardSection"&gt;
      &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;div id="ladder"&gt;
        &lt;img src="http://s19.postimg.org/otai9he2n/oie_e_RDOY2iqd5o_Q.gif" /&gt;
      &lt;/div&gt;

      &lt;div id="bigSnake"&gt;
        &lt;img src="http://s19.postimg.org/hrcknaagz/oie_485727s_RN4_KKBG.png" /&gt;
      &lt;/div&gt;

      &lt;div id="player1" style="position:absolute; top:10px; left:10px;"&gt;
        &lt;!--style="position: absolute; top: 597px; z-index: 1;"--&gt;
        &lt;img src="http://s19.postimg.org/t108l496n/human_Piece.png" /&gt;
      &lt;/div&gt;

      &lt;div id="player2" style="position:absolute; top:15px; left:5px;"&gt;
        &lt;img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div id="playerAndDiceSection"&gt;
      &lt;div id="playerSection"&gt;
        &lt;div id="player1"&gt;
          &lt;img src="http://s19.postimg.org/t108l496n/human_Piece.png" /&gt;Player1
          &lt;!--&lt;p&gt;Player1&lt;/p&gt;--&gt;
        &lt;/div&gt;
        &lt;div id="player2"&gt;
          &lt;img src="http://s19.postimg.org/l6zmzq1dr/computer_Piece.png" /&gt;Player2
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div id="diceSection"&gt;
        &lt;img src="http://s19.postimg.org/fa5etrfy7/image.gif" name="mydice" onclick="move()" style="background-color: white;"&gt;
        &lt;h2 id="status"&gt;&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>