如何将订单数量置于购物车图标左上角？技术实现求助

我尝试将数字放在购物车图标的左上角，但未成功，想要实现类似购物车图标左上角有红色圆形数字标记的效果，当前代码如下：

JSX代码 #

<BagContainer>
  <Bag src={bag} hideIcons={hideIcons} title="bag" onClick={openCart}/>
  <Number>5</Number>
</BagContainer>

styled-components代码 #

export const BagContainer=styled.div`
    position: relative;
    width: fit-content;
`
export const Bag= styled.img<{hideIcons:boolean}>`
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.8rem;
    display: ${(icon) => icon.hideIcons ? 'none' : 'inline'}

`;


export const Number=styled.span`


`

解决方案 #

给Number组件添加绝对定位及样式，利用父容器的相对定位实现左上角标记效果：

export const Number=styled.span`
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    /* 若数字可能超过1位，可调整为min-width适配 */
    /* min-width: 20px; */
`

关键样式说明：

• position: absolute：相对于设置了position: relative的父容器BagContainer定位
• top: -8px、left: -8px：让数字标记偏移到图标的左上角外侧，可根据图标大小调整数值
• 圆形背景、文字居中样式：实现类似通知标记的视觉效果，适配数字展示

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