As I work on creating a card object, I envision it with the className .card that is styled in CSS as follows:
.card img{position:absolute; width:150px; height:160px}
I want only the images inside my div to overlap each other while not affecting the divs themselves. However, every time I create 2 or more cards, they end up covering each other as if they shared the position: absolute property.
This is how I have implemented the JavaScript code:
this.add = function()
{
console.log("add");
this.container.appendChild(this.backImg);
this.container.appendChild(this.frontImg);
this.container.className = "card";
document.body.appendChild(this.container);
};
};
var card1 = new Card(1);
card1.add();