offset a stack of divs

[jeffreyeaton76]

I am trying to make a stack of divs representing the actual stack of playing cards each player has in War. Each one should be offset by 1px each so it looks like a stack. I'm able to make the stack but they are not offsetting. My loop looks like this:

var playerCard = document.getElementsByClassName("player");
for (i = 0; i < 26; i++) {
  var stack = document.createElement("div");
  playerCard[i].appendChild(stack);
  stack.className = "player";
  stack.style.left = i + "px";
  stack.style.top = i + "px";
}

There is no special left or top values in the CSS for the player class but I think the JS would override them anyways. My branch for this is: https://github.com/jeffreyeaton76/war/tree/div-stack and the code is on lines 37-42.

[amaseda]

Going to clone this down and play around with it. Stay tuned!

[jeffreyeaton76]

Awesome. Bear in mind the branch broke the CSS pretty bad but I figured I'd get to that later. If you want to see what it's supposed to look like the master is deployed here: http://jeffreyeaton76.github.io/war/

[amaseda]

Made some progress in-person! Feel free to re-open this if you have more questions.