不可见的绝对或相对位置导致网格组件在Next js中相互重叠

Question

我已经遇到这个问题超过 48 小时了，我尝试注释掉所有内容，只留下受影响的组件，甚至尝试更改整个组件进行测试，但我得到了相同的结果。然而，当我交换它们的位置（将下面的元素带到顶部）时，它工作得很好，没有重叠问题，但是当我将其恢复到我想要的方式时，第二个元素顽固地位于第一个元素之上。请帮忙！

This is the pages/post/[slug].js page
import Head from "next/head";
import { useState } from "react";
import styles from "@/styles/product.module.scss";
import db from "@/utils/db";
import Header from "@/components/header";
import News from "@/models/News";
import MiniNews from "@/components/home/mini";
import Category from "@/models/Category";
import MainPost from "@/components/productPage/mainPost";
import ForCategories from "../../components/breakingNews/ForCategories";
import ForCreators from "@/components/breakingNews/ForCreators";
export default function product({ post, related, news, categories }) {
  const [activeImg, setActiveImg] = useState("");
  console.log(post);

  const country = {
    name: "Nigeria",
    flag: "https://cdn.ipregistry.co/flags/emojitwo/ng.svg",
  };
  return (
    <>
      <Header country={country} />
      <div className={styles.product}>
        <div className={styles.product__container}>
          <div className={styles.path}>
            Home / {post.category.name} / {post.name}
          </div>
          <MiniNews news={news} />
          <div className={styles.product__main}>
            <div className={styles.product__main_one}>
              <MainPost post={post} />
            </div>
            <div className={styles.product__main_two}>
              <ForCategories
                categories={categories}
                header="All Categories"
                bg="#379237"
              />
              <ForCreators news={news} header="All Categories" bg="#379237" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export async function getServerSideProps(context) {
  try {
    const { params } = context;
    const slug = params.slug;
    await db.connectDb();

    // slug post db calling
    let post = await News.findOne({ slug })
      .populate({ path: "category", model: Category })
      .lean();
    if (!post) {
      return {
        notFound: true, // Return 404 page if post is not found
      };
    }

    // all post db calling
    let news = await News.find()
      .populate({ path: "category", model: Category })
      .sort({ createdAt: -1 })
      .lean();

    // all categories db calling
    let categories = await Category.find().sort({ createdAt: -1 }).lean();

    return {
      props: {
        post: JSON.parse(JSON.stringify(post)),
        news: JSON.parse(JSON.stringify(news)),
        categories: JSON.parse(JSON.stringify(categories)),
      },
    };
  } catch (error) {
    console.error("Error fetching post:", error);
    return {
      props: {
        post: null,
        news: null,
        categories: null,
      },
    };
  }
}

这是 slug 页面的样式

  height: 100%;
  background: #eeeeee;

  &__container {
    padding-top: 1rem;
  }
  .path {
    max-width: 95%;
    margin: 0 auto;
    font-size: 10px;
    color: #1e1e1e;
  }
  &__main {
    padding: 20px 15px;
    max-width: 95%;
    margin: 0 auto;
    position: relative;
    margin-top: 1rem;
    gap: 1rem;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    &_one {
      grid-column: span 9;
      height: 100%;
    }

    &_two {
      grid-column: span 3;
    }
  }
  @media (max-width: 900px) {
    &__main {
      grid-template-columns: repeat(1, 1fr);
      padding: 0 5px;
      gap: 0;
    }
  }
}

在上面的代码中，style.product__main 中的 div 元素在较大的屏幕上运行良好。但是，当我的媒体中断为 900px 时，我并没有将其变成一个漂亮的列，而是将带有 style.product__main_two 类名的 div 奇怪地放在 style.product__main_one 之上。至此，我已经尝试了所有我能想到的方法。我什至将整个 div 2 更改为一个段落，看看会发生什么，但我得到了相同的结果。除了你可以在主要样式中发现的相对位置之外，我在任何地方都没有绝对的定位，即使我把它拿出来仍然不起作用。请帮忙

Answer 1

我意识到错误来自组件中的样式。

import styles from "./styles.module.scss";
import ReactImageMagnify from "react-image-magnify";
import { useState } from "react";
import { MdOutlineLibraryBooks } from "react-icons/md";
import { IoTimeOutline } from "react-icons/io5";
import dayjs from "dayjs";
import { LiaCommentSolid } from "react-icons/lia";
import { HiShare } from "react-icons/hi";

export default function MainPost({ post }) {
  const [active, setActive] = useState(0);
  return (
    <div className={styles.mainpost}>
      <div className={styles.mainpost__list}>
        <p className={styles.mainpost__list_category}>{post.category.name}</p>
        <h3 className={styles.mainpost__list_name}>{post.name}</h3>
        <div className={styles.mainpost__list_timestamp}>
          <span className="flex">
            <IoTimeOutline /> {dayjs(post.createdAt).format("MMMM D")}
          </span>
          <span className="flex">
            <MdOutlineLibraryBooks /> 2 mins Read
          </span>
        </div>
        <img src={post.image} alt="postImage" />
        <div className="flex items-start gap-4">
          <div className={styles.textOverlay__timestamp}>
            <span className="flex flex-col items-center justify-center">
              <LiaCommentSolid />{" "}
              <p className="text-[0.5rem] text-center">Add Comment</p>
            </span>
            <span className="flex flex-col items-center justify-center mt-[1rem]">
              <HiShare />{" "}
              <p className="text-[0.5rem] text-center">Share Post</p>
            </span>
          </div>
          <p dangerouslySetInnerHTML={{ __html: post.post }}></p>
        </div>
      </div>
    </div>
  );
}

的风格

.mainpost {
  &__list {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 130px;
  }
}

列表项的高度设置为 130px，这导致了重叠。 更改为100%并解决问题

height: 100%;