Stacking images with Javascript and CSS

Question

I'm using vanilla JS and CSS. I would like to add a pancake (individual PNGs) on top of the previous pancake every time I click on the pancake button (🥞).

However, I'd the pancake to stack on top of each other, instead of flying over the previous. I've tried to do negative margins for the img element in .css, as well as negative height for the
element in .css, but to no success. How can I achieve a neatly stacked pancake?

Current outcome of pancake stack

Desired Outcome

var count = 0;

var imageArray = [
  "img/pancake plate 1.png",
  "img/pancake straweberry 1.png",
  "img/pancake 1.png",
  "img/pancake 2.png",
  "img/pancake 3.png",
  "img/pancake 4.png"
]; // image array oragnised from bottom to top

function addPancake() {

  var pancakeImage = document.createElement("img"); // create the <img> tag
  pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
  var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>

  insertArea.insertBefore(document.createElement("br"), insertArea.childNodes[0]); // add <br> before every new image to show the "stacking" effect
  insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
  count++;
};

* {
  background-color: beige;
  font-size: 50px;
}

button {
  font-size: 200px;
  margin-left: 25vw;
}

#pancake-area {
  margin-left: 140px;
}

img {
  width: 200px;
  position: relative;
}

<div id="pancake-area">
</div>

<button onclick="addPancake()">🥞</button>

Answer 1

To get the images in reversed order add display: flex; and flex-direction: column-reverse; to the #pancake-area wrapper. This also removed the need of adding the <br/> tags via javascript, so you can drop that.

To get the overlapping add a negative margin-bottom (e.g -50px but you can adjust that number to your needs). This will make the images overlap from top to bottom.

Note: I added a fixed height and a border to make them visible in the example as the image paths are broken. You can drop that cause i suppose the image paths are working for you.

var count = 0;

var imageArray = [
  "img/pancake plate 1.png",
  "img/pancake straweberry 1.png",
  "img/pancake 1.png",
  "img/pancake 2.png",
  "img/pancake 3.png",
  "img/pancake 4.png"
]; // image array oragnised from bottom to top

function addPancake() {

  var pancakeImage = document.createElement("img"); // create the <img> tag
  pancakeImage.setAttribute("src", imageArray[count]); // insert img src="current item" as <img> src
  var insertArea = document.getElementById("pancake-area"); // specify pancake-area <div>
  insertArea.insertBefore(pancakeImage, insertArea.childNodes[0]); // add pancake image before the previous image
  count++;
};

* {
  background-color: beige;
  font-size: 50px;
}

button {
  font-size: 200px;
  margin-left: 25vw;
}

#pancake-area {
  margin-left: 140px;
  display: flex;
  flex-direction: column-reverse;
}

img {
  width: 200px;
  position: relative;
  margin-bottom: -50px;
  /* just for debugging cause image paths are broken: */
  height: 100px;
  border: 1px dotted red;
}

<div id="pancake-area">
</div>

<button onclick="addPancake()">?</button>