h4元素导致h3元素左移的CSS布局问题求助

问题根源在于.popular标签同时使用了position: sticky和float: right，这两个属性混用会干扰正常文档流，加上固定的left:16rem定位，直接打乱了同为行内块元素的pricing-card-header的布局位置。

修复方案： #

1. 给父容器.pricing-card添加相对定位，作为绝对定位标签的参考容器
2. 将.popular的定位方式改为绝对定位，脱离文档流，避免影响其他元素
3. 调整定位属性为right而非固定left，适配不同宽度的卡片
4. 统一React元素的属性为className（原代码中<h4>用了class，需修正）

修改后的代码： #

HTML（React）：

<div className="pricing-card">
    <h3 className="pricing-card-header starter">Starter</h3>
    <h4 className="popular">Empfehlung</h4>
    <div className="price">149<sup>€</sup></div>
    <ul>
        <li><strong>5</strong> Seiten*</li>
        <li><strong></strong> Individuelles Desing</li>
        <li><strong></strong> Responsive (für alle Endgeräte)</li>
        <li><strong></strong> Google Maps & Kontaktformular</li>
        <li><strong></strong> Wartung & Support inklusive</li>
        <li><strong></strong> Textänderungen inklusive</li>
        <li><strong></strong> Suchmaschinenoptimiert (SEO)</li>
    </ul>
</div>

CSS：

.pricing-card{
    flex: 1;
    max-width: auto;
    background: var(--card-bg);
    margin: 20px 10px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    color: var(--primary-color);
    transition: .3s linear;
    position: relative; /* 新增：作为绝对定位的参考 */
}

.pricing-card-header {
    background-color: var(--btn-secondary-bg);
    display: inline-block;
    color: #fff;
    padding: 12px 30px;
    border-radius: 0 0 20px 20px;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 600;
    transition: .4s linear;
}

.pricing-card:hover .pricing-card-header {
    box-shadow: 0 0 0 36em var(--primary-color);
}

.popular {
    position: absolute; /* 替换sticky为absolute */
    text-decoration: none;
    top: 10px;
    right: 10px; /* 用right替代固定left，适配不同卡片宽度 */
    width: 4.8rem;
    font-size: 11px;
    background: var(--popular);
    color: var(--btn-secondary-bg);
    padding: 4px 8px;
    border-radius: 5px;
}

这样修改后，popular标签会固定在卡片右上角，不会再干扰标题的居中布局，同时保持了原有的视觉效果。

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