如何将数字123移动至图片右侧红圈位置？

你的问题核心有两点：一是父容器#ImgControl固定的25px宽高导致图片超出部分被裁剪；二是用float:right定位数字并非最优方案，应该通过绝对定位实现右上角徽章效果。

修正后的CSS代码 #

#ImgControl {
    position: absolute;
    bottom: 20px;
    right: 30px;
    /* 移除固定宽高，让容器自适应内容 */
    width: fit-content;
    height: fit-content;
    /* 设置相对定位，作为内部徽章的定位参照 */
    position: relative;
}

#ImgControl img {
    /* 固定图片尺寸，确保完整显示 */
    width: 25px;
    height: 25px;
}

#ImgControl span {
    /* 绝对定位到右上角红圈位置 */
    position: absolute;
    top: -8px;
    right: -8px;
    /* 徽章样式 */
    background-color: red;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    /* 确保数字在图片上方 */
    z-index: 1;
}

修正后的HTML代码 #

<div id="ImgControl">
  <img src="assets/icon/cart.png" @click="Test"/>
  <span>123</span>
</div>

关键调整说明 #

• 去掉#ImgControl的固定宽高，改用fit-content让容器根据图片大小自适应，彻底解决图片被裁剪的问题。
• 给#ImgControl添加position: relative，让内部的数字徽章能以它为基准定位。
• 通过绝对定位将span元素精准移到右上角，搭配背景色、圆角等样式实现目标中的红圈徽章效果。

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