Hex map positioning

programming web dev
1

Hey all,
I’m trying to make a hex game in js but the problem is I suck at js. So what I want to do is load and position a bunch of tiles. My problem is the positioning part. Here’s what I’ve been trying :

 
var img = document.createElement("img");
img.setAttribute("src","tile.png");
img.setAttribute("id","tile1");
img.style.paddingLeft = '500px';
document.body.appendChild(img);

var img2 = document.createElement("img");
img2.setAttribute("src","tile.png");
img2.setAttribute("id","tile2");
img2.style.paddingLeft = '525px';
img2.style.marginTop = '25px';
img2.style.zIndex = "2";
document.body.appendChild(img2);

This doesn’t work. It adds both tiles to screen, but doesn’t position them correctly.

If anyone could point me to some tutorials about making a hex map in js that would be great! or even positioning elements properly >.< My queries my turned up nothing.

Thanks