使用绝对位置会使我的图像消失

Question

所以我正在尝试创建一个记忆游戏，其中一侧是“空白”（div 有颜色），另一侧显示图像。现在我在覆盖 div 和图像时遇到问题。彩色 div 与图片不在同一位置。我尝试在图像和 div 上使用绝对位置，主容器具有相对位置，但是当我应用绝对位置时，它们消失了

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 itterate through 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

您的 .front 和 .back 元素绝对位于 .card 父元素内。您需要在包含元素上指定 height/width，因为 absolute 会将子元素从正常流中取出。

你的代码中引用了图片，但我不知道它们应该有多大，所以我在这里做了一个假设。您需要根据需要调整像素值。

如果您进行此更改，您应该会看到图像不再“消失”：

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

使用绝对位置会使我的图像消失

Using position absolute is making my images disappear

html

javascript

css

positioning