Блог

Главная - Вопросы по программированию - относительный и абсолютный в CSS, работает не так, как ожидалось

относительный и абсолютный в CSS, работает не так, как ожидалось

html #css #position

#HTML #css #позиция

Вопрос:

Я следую https://www.youtube.com/watch?v=-tlb4tv4mC4amp;t=956s как нуб. Набран точно в соответствии с инструкциями, никаких опечаток (которые я вижу). Пытаюсь создать игру с сопоставлением памяти.

В настоящее время на этом этапе:

введите описание изображения здесь

 body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: blue; }

section {
display: grid;
grid-template-columns: repeat(4, 8rem);
grid-template-rows: repeat(4, 8rem);
grid-gap: 2rem;}



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


.back {
background: green;}

Сейчас я пытаюсь сделать обратную сторону карточки (зеленую) поверх изображений обложек альбомов.

В руководстве используются абсолютные и относительные позиции, и никаких проблем не обнаружено, однако это происходит с моим. Это должна быть та же сетка, но зеленого цвета, а не обложки альбомов.

введите описание изображения здесь

 body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: blue;}

section {
display: grid;
grid-template-columns: repeat(4, 8rem);
grid-template-rows: repeat(4, 8rem);
grid-gap: 2rem }

.card {
position: relative}

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


.back {
background: green;}

Я пробовал: установка родительского элемента в качестве сетки — и дочернего элемента в виде столбца: 1, строки: 1. Не работает. Я пытался добавить top и left в положение, не работает.

Чего мне не хватает?

Также включены HTML и JS.

Большое спасибо,

JS

введите описание изображения здесь

      // Select some elements
const section = document.querySelector('section');
const playerLivesCount = document.querySelector('span');
const playerLives = 6;

//Link text

playerLivesCount.textContent = playerLives;

//Generate the date
const getData = () => [
    {imgSrc:"./images/beatles.jpeg", name: "beatles" },
    {imgSrc:"./images/blink182.jpeg", name: "blink 182" },
    {imgSrc:"./images/fkatwigs.jpeg", name: "fka twigs" },
    {imgSrc:"./images/fleetwood.jpeg", name: "fleetwoodMac" },
    {imgSrc:"./images/joy-division.jpeg", name: "joy-division" },
    {imgSrc:"./images/ledzep.jpeg", name: "led zepplin" },
    {imgSrc:"./images/metallica.jpeg", name: "metallica" },
    {imgSrc:"./images/pinkfloyd.jpeg", name: "pink floyd" },
    {imgSrc:"./images/beatles.jpeg", name: "beatles" },
    {imgSrc:"./images/blink182.jpeg", name: "blink 182" },
    {imgSrc:"./images/fkatwigs.jpeg", name: "fka twigs" },
    {imgSrc:"./images/fleetwood.jpeg", name: "fleetwoodMac" },
    {imgSrc:"./images/joy-division.jpeg", name: "joy-division" },
    {imgSrc:"./images/ledzep.jpeg", name: "led zepplin" },
    {imgSrc:"./images/metallica.jpeg", name: "metallica" },
    {imgSrc:"./images/pinkfloyd.jpeg", name: "pink floyd" },
];

//randomise

const randomise = () => {
    const cardData = getData();
    cardData.sort(() => Math.random() - 0.5);
    return cardData;
    };


//Generate HTML
const cardGenerator = () => {
    const cardData = randomise();

    cardData.forEach((item) => {
        const card = document.createElement("div");
        const face = document.createElement("img");
        const back = document.createElement("div");
        card.classlist = "card";
        face.classList = "face";
        back.classList = "back";
    
    face.src= item.imgSrc
   //Attach card to section
   section.appendChild(card);
   card.appendChild(face);
   card.appendChild(back);

    });

     

};

cardGenerator();


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <script src ="./app.js" defer></script>
    <title>Memory Game</title>
</head>
<body>

    <h1>Lives: <span class="playerLivesCount"></span> </h1>
    <section></section>
    
</body>
</html>

Комментарии:

1. Пожалуйста, вставьте свой код в вопрос вместо скриншота.

2. Трудно сказать, как генерируется выходной HTML-код. Убедитесь .face , что и .back находится внутри .card . Затем позиционируйте относительную «ловушку» абсолютной позиции 🙂

Метки: , ,