React卡片布局异常求助：卡片未显示在右侧的问题排查

问题原因分析 #

1. CSS语法错误：Services.css中.cards>{是无效语法，正确应为.cards {，导致.cards的position: relative未生效。内部绝对定位的卡片会相对于父级.services（flex容器）定位，而非.cards，最终跑到左侧。
2. 布局空间分配问题：.cards在flex容器.services中未设置空间占比，无法占据右侧区域，导致卡片定位基准错误。
3. 双重绝对定位冗余：Card.css中.card设置了position: absolute，外层motion.div也用绝对定位，双重脱离文档流导致布局混乱。
4. 定位参数错误：卡片使用left属性定位，基准是容器左侧，自然显示在左侧区域。

分步解决方案 #

1. 修复CSS语法错误并调整布局空间 #

修改Services.css中.cards的样式：

.cards {
    position: relative; /* 修复语法错误，确保内部绝对定位基于此容器 */
    flex: 1; /* 让cards占据右侧全部可用空间 */
    height: 100%; /* 与services容器高度一致，保证定位范围正确 */
}
.cards>*{
    position: absolute;
}

2. 调整卡片定位基准到右侧 #

修改Services.jsx中motion.div的定位参数，将left改为right，并调整垂直位置（原top值过高会超出视图）：

{/* 第一张卡片 */}
<motion.div
whileInView={{right: '14rem'}}
initial={{right: '25rem'}}
transition={transition}
style={{right: '14rem'}}
>
    <Card
        emoji={HeartEmoji}
        heading={'Design'}
        detail={"Figma, Sketch, Photoshop, Adobe, Adobe xd"}
    />
</motion.div>
{/* 第二张卡片 */}
<motion.div
whileInView={{right: '10rem'}}
initial={{right: '25rem'}}
transition={transition}
style={{ top: "14rem", right: "10rem" }}
>
    <Card
        emoji={Glasses}
        heading={"Developer"}
        detail={"Html, Css, JavaScript, React"}
    />
</motion.div>
{/* 第三张卡片 */}
<motion.div
whileInView={{right: '14rem'}}
initial={{right: '25rem'}}
transition={transition}
style={{ top: "28rem", right: "14rem" }}
>
    <Card
        emoji={Humble}
        heading={"UI/UX"}
        detail={
            "Lorem ispum dummy text are usually use in section where baalabalalala thank you"
        }
    />
</motion.div>

3. 移除冗余的绝对定位 #

修改Card.css，去掉.card的绝对定位：

.card {
    width: 10rem;
    height: 13rem;
    /* 移除position: absolute，避免双重脱离文档流 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.26);
    border: 7px solid var(--orangeCard);
    box-shadow: var(--boxShadow);
    border-radius: 20px;
    padding: 0px 26px 2rem 26px;
}

修改说明 #

• 修复语法错误确保卡片定位基准正确，避免全局定位。
• flex:1让.cards占据右侧空间，为卡片提供正确的定位容器。
• right属性让卡片相对于容器右侧定位，实现右侧显示效果。
• 调整top值避免卡片超出视图范围，可根据实际需求微调。
• 移除卡片自身的绝对定位，让卡片在motion.div内正常布局，保留动画效果的同时避免布局冲突。

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