使用Styled Components实现按钮叠加效果的样式问题

现有代码问题点 #

• IconButton中重复声明position属性，后写的position: relative覆盖了前面的position: absolute，导致绝对定位逻辑完全失效
• MainButton设置了overflow: hidden，超出主按钮边界的小按钮部分会被直接裁切，无法显示叠加效果
• 小按钮没有设置明确的偏移位置，即使定位生效也无法自动对齐到主按钮边角
• 两个按钮没有设置层级关系，可能出现小按钮被主按钮遮挡的问题

修正后样式代码 #

const MainButton = styled.button`
  border-radius: 50%;
  border: 2px solid red;
  position: relative;
  background-color: #fff;
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  z-index: 1;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

const IconButton = styled.button`
  border-radius: 50%;
  border: 2px solid red;
  position: absolute;
  background-color: #fff;
  width: 22px;
  height: 22px;
  overflow: hidden;
  padding: 2px;
  // 按需求调整偏移值，当前为右下角叠加效果
  bottom: -4px;
  right: -4px;
  z-index: 2;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

配套要求 #

• 组件结构必须满足IconButton是MainButton的子元素，绝对定位才会相对于主按钮生效，参考结构：

<MainButton>
  <img src="main-icon.png" alt="主操作" />
  <IconButton>
    <img src="sub-icon.png" alt="次级操作" />
  </IconButton>
</MainButton>

• 偏移值可根据设计需求调整：右上角叠加替换为top: -4px; right: -4px，左上角叠加替换为top: -4px; left: -4px即可
• 纵向排列按钮组时，给按钮外层容器预留至少8px的边距，避免偏移出的小按钮被相邻元素遮挡

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