使用样式化组件的按钮上的重叠按钮

Question

我在将按钮重叠在另一个按钮上时遇到问题。 我想关注我附在下面的照片

代码沙盒CLICK HERE

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

const IconButton = styled.button`
  border-radius: 50%;
  border: 2px solid red;
  position: absolute;
  background-color: #fff;
  display: block;
  width: 22px;
  height: 22px;
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

Answer 1

为了相对于MainButton 绝对定位IconButton，它需要呈现为MainButton 的子级。

<MainButton type="button">
  <img
    src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"
    alt="test"
  />
  <IconButton>+</IconButton>
</MainButton>

接下来调整IconButton的定位。

const IconButton = styled.span`     // <-- use span since nesting button is invalid
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid red;
  cursor: pointer;
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;                // <-- center text vertically
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
  left: 50%;                        // <-- position halfway across parent
  bottom: 0;                        // <-- position at bottom of parent
  transform: translate(-50%, -50%); // <-- translate to center button

  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

删除父 MainButton 上的 overflow: hidden; 规则。

更新

将图像移动为背景图像并调整位置。

const MainButton = styled.button`
  border-radius: 50%;
  border: 2px solid red;
  position: relative;
  background-color: #fff;
  background-image: ${({ src }) => `url(${src});`}
  background-position: center center;
  background-size: contain;
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  margin-bottom: 0.5rem;
  cursor: pointer;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

const IconButton = styled.div`
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid red;
  cursor: pointer;
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-align: center;
  user-select: none;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);

  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;