Overlap Button on Buttons using Styled Components - css

Question

I have here a problem on overlapping the button on another button.
I wanted to follow the pic I've attached below
Codesandbox 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

In order to absolutely position IconButton relative to MainButton it needs to be rendered as a child of MainButton.
<MainButton type="button">
<img
src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"
alt="test"
/>
<IconButton>+</IconButton>
</MainButton>
Next adjust the positioning of 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;
}
`;
Remove the overflow: hidden; rule on parent MainButton.
Update
Move the image to be a background image and tweaked the positioning.
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;
}
`;