求助：使用CSS Relative/Absolute定位实现滚动Div的布局异常问题

问题背景 #

之前一直依赖MUI、Tailwind这类预制组件开发，现在尝试纯CSS+JavaScript实现滚动卡片组件。使用relative和absolute定位让文本层嵌入图片时遇到问题：当页面宽度小于所有图片总宽度时，图片会溢出到相邻div中，不遵守边距规则。不想通过useRef获取元素宽度再计算left值来调整间隙，寻求其他解决方案。

问题根源分析 #

从你的代码来看，核心问题在于：

• 滚动容器scrollableCategoryContent用了grid-auto-flow: column，但内部的article（卡片容器）没有设置固定宽度，导致卡片无法保持独立布局，挤在一起
• cardAnchorConteirner设置了position: relative但没有明确宽度，绝对定位的cardImage脱离文档流后没有有效约束，容易溢出
• 手动给a标签设置left的方式属于硬编码，无法适配不同屏幕尺寸，也违背了CSS布局的灵活性

无需useRef的解决方案 #

方案1：利用Grid布局的固定宽度+Gap控制间距 #

给每个卡片容器（article）设置固定宽度，配合Grid的gap属性控制卡片间的间距，不需要手动计算left值：

修改后的代码示例

JSX部分

import Image from "next/image";
import styles from "../../styles/Card.module.css";

export default function Card() {
    const listArticles = [1, 2, 3, 4];
    const textTitle = ["Vant", "Vam", "Puits", "JUmpP"];
    
    return (
        <section className={styles.scrollableCategoryContent}>
            {listArticles.map((art, index) => (
                <article key={index} className={styles.cardItem}>
                    <a href="" className={styles.cardAnchorConteirner}>
                        <Image
                            className={styles.cardImage}
                            width={580}
                            height={480}
                            objectFit="cover"
                            objectPosition="top left"
                            src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Postgres_Query.jpg/1920px-Postgres_Query.jpg"
                            alt="test"
                        />
                        <div className={styles.textCardBackGround}>
                            <h2 className={styles.cardTitleText}>{textTitle[index]}</h2>
                        </div>
                    </a>
                </article>
            ))}
        </section>
    );
}

CSS部分（Card.module.css）

.scrollableCategoryContent{
  display: grid;
  grid-auto-flow: column;
  gap: 20px; /* 卡片间的间距，替换手动left计算 */
  background-color: black;
  max-width: 700px; /* 补全单位px */
  height: 480px;
  overflow-x: scroll;
  padding: 0 10px; /* 可选：给容器左右加内边距，避免卡片贴边 */
}

.cardItem {
  width: 580px; /* 固定卡片宽度，和图片宽度一致 */
  height: 480px;
}

.cardAnchorConteirner{
  display: block; /* 让a标签成为块级元素，承担布局 */
  width: 100%;
  height: 100%;
  position: relative; /* 作为绝对定位元素的父容器 */
  overflow: hidden; /* 避免图片溢出容器 */
}

.cardImage{
  width: 100%;
  height: 100%;
  /* 移除absolute，让Next.js Image组件自适应容器 */
}

.textCardBackGround {
 position: absolute;
 background-color: aqua;
 width: 100%;
 height: 20%;
 left: 0;
 right: 0;
 bottom: 20%;
}

.cardTitleText{
  color: white;
  margin: 0; /* 移除默认margin，避免文本溢出 */
  padding: 10px; /* 给文本加内边距 */
}

方案2：使用Flex布局替代Grid #

如果更习惯Flex布局，也可以用display: flex实现滚动容器，同样给卡片设置固定宽度：

.scrollableCategoryContent{
  display: flex;
  gap: 20px;
  background-color: black;
  max-width: 700px;
  height: 480px;
  overflow-x: scroll;
  padding: 0 10px;
}

.cardItem {
  flex-shrink: 0; /* 禁止卡片缩小 */
  width: 580px;
  height: 480px;
}

关键修改点说明 #

1. 给卡片容器cardItem设置固定宽度，确保每个卡片独立占据空间，不会挤在一起
2. 用Grid/Flex的gap属性控制卡片间距，替代手动计算left的硬编码方式
3. 移除cardImage的position: absolute，让Next.js Image组件自适应父容器宽度，避免溢出
4. 给cardAnchorConteirner添加overflow: hidden，确保内部元素不会超出容器范围
5. 补全max-width: 700的单位px，修复无效样式

内容的提问来源于stack exchange，提问作者Bommu Perneta