如何将订单数量放在购物车图标上方

Question

hello I tried to put number at top left corner of cart icon and I didnt succeeded

I'm trying to get a result as in the picture enter image description here

this is my code:

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

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

`;

export const BagContainer=styled.div`
    position: relative;
    width: fit-content;
`
export const Number=styled.span`


`

Answer 1

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

export const Number = styled.span`
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(-50%, -50%, 0);
`;