SCSS样式未生效求助：如何为React中CardImg设置自定义定位样式

一、自定义样式未生效的原因及修复 #

你的.sunset样式没生效，核心原因是样式优先级冲突或加载顺序问题：

1. Bootstrap内置类（如position-absolute）和自定义类权重相同，若你的SCSS文件在Bootstrap样式之前导入，自定义样式会被覆盖。
2. 少数情况是SCSS文件未正确导入到React组件，导致样式未加载。

修复方法： #

• 调整加载顺序：在项目样式入口文件中，先导入Bootstrap，再导入你的自定义SCSS文件。
• 提升选择器权重：用更具体的选择器覆盖Bootstrap样式，示例：

.sunset.position-absolute {
    top: 100%; /* 后续调整为适配h1底部的定位值 */
}

• （应急方案，不推荐长期使用）给样式加!important强制生效：

.sunset {
    top: 100% !important;
}

二、将图片精准定位到h1底部的实现 #

要让图片贴合h1底部，需调整定位参考元素和样式参数：

步骤1：修改父容器定位属性 #

将包裹h1和CardImg的<Col>设置为position-relative，让CardImg的绝对定位以Col为参考容器（而非外层Row）：

<Col className="d-flex align-items-center justify-content-center position-relative">
    <h1 className='hero-title'>cloud</h1>
    <CardImg className="sunset position-absolute" src={sunset} alt="sunset"/>
</Col>

步骤2：调整CardImg定位样式 #

设置top: 100%让图片定位到Col内容的底部（即h1的底部），若需要微调间距，可配合transform：

.sunset.position-absolute {
    top: 100%;
    /* 可选：若需和h1底部留微小间距，调整translateY的数值 */
    transform: translateY(5px);
    /* 可选：限制图片宽度避免超出容器 */
    max-width: 80px;
}

若h1自带margin-bottom，需对应调整top值抵消该间距，比如top: calc(100% + 10px)（假设h1的margin-bottom为10px）。

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