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

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父元素中。您需要在包含元素上指定高度/宽度，因为absolute将子元素从正常流中取出。

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

如果你做了这个更改，你应该会看到图像不再"消失";

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