Using position absolute is making my images disappear

Question

So I'm trying to create a memory game where one side is "blank"(a div with color) and the other side shows an image. Right now I'm having issues overlaying the div and the image. The colored div isn't in the same spot as the image. I tried using position absolute on the image and the div with the main container having position relative, but when I applied absolute they disappear

const mainDiv = document.querySelector("#thePuzzle");
const span = document.querySelector(".amount");
const span2 = document.querySelector(".amount2");
const amountCorrect = 1;
const amountWrong = 1;

//Creating the array of image objects
const imageArrayObj = () => [{
    imageSrc: "./fox.jpg",
    imageName: "fox"
  },
  {
    imageSrc: "./gir.jpg",
    imageName: "giraffe"
  },
  {
    imageSrc: "./panda.png",
    imageName: "panda"
  },
  {
    imageSrc: "./fox.jpg",
    imageName: "fox"
  },
  {
    imageSrc: "./gir.jpg",
    imageName: "giraffe"
  },
  {
    imageSrc: "./panda.png",
    imageName: "panda"
  },
];
//randomize the array
const randomize = () => {
  const randArray = imageArrayObj();
  randArray.sort(() => Math.random() - 0.5);
  return randArray;
};
//we must create each box which is a div with an image and another div
const cardGenerator = () => {
  const cards = randomize();
  //we need to iterate over the image array
  cards.forEach((element) => {
    const card = document.createElement("div");
    const face = document.createElement("img");
    const back = document.createElement("div");
    card.classList = "card";
    back.classList = "back";
    face.classList = "face";
    face.src = element.imageSrc;
    //attach card to the main div
    mainDiv.appendChild(card);
    card.appendChild(face);
    card.appendChild(back);
  });
};

cardGenerator();

body {
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(238, 174, 202);
  background: radial-gradient( circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#thePuzzle {
  display: grid;
  grid-template-columns: repeat(3, 4rem);
  gap: 2rem;
  perspective: 800px;
}

.card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
}

.face,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
}

.back {
  background-color: rgba(100, 27, 100, 0.632);
  backface-visibility: hidden;
}

<div id="thePuzzle">
</div>
<div class="scores">
  <p class="correct">How many correct: <span class="amount"></span></p>
  <p class="wrong">How many wrong: <span class="amount2"></span></p>
</div>

Answer 1

Your .front and .back elements are absolutely positioned inside the .card parent. You need to specify a height/width on the containing element because absolute takes the children out of the normal flow.

You have referenced images in your code and I don't know how big they are meant to be, so I've made an assumption here. You'll need to adjust the pixel values as needed.

If you make this change you should see the images no longer "disappear":

.card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(90deg); 
  border:1px solid red;
  height:100px;
  width:100px;
}