Negative margin value hides element - css

Question

Im trying to make a carousel with arrows. for the arrows to be in the right position and look pretty, im using a negative margin (margin: -Npx).
This causes the arrow to be hidden inside the carousel.
ive trying applying z-index: 9999.
overflow-x of carousel cannot be visible (per design)
const CarouselWrapper = styled.div`
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
position: relative;
scroll-snap-type: x mandatory;
&::-webkit-scrollbar {
display: none;
}
& > * {
scroll-snap-align: start;
}
`;
const ArrowsContainer = styled.div`
display: flex;
align-items: center;
position: absolute;
width: 100%;
justify-content: space-between;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
`;
const ArrowWrapper = styled.div`
background: white;
border-radius: 50%;
display: flex;
opacity: 0.7;
padding: ${rem(8)};
pointer-events: auto;
box-shadow: 0px 10px 6.2px -4.95px rgba(0, 0, 0, 0.06),
0px 0px 10.2px 0.55px rgba(0, 0, 0, 0.02);
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
&:first-child {
margin-left: ${rem(-20)};
}
`;
const CarouselContainer = styled.div`
position: relative;
`;
<CarouselContainer>
<CarouselWrapper ref={ref}>{children}</CarouselWrapper>
{showArrows && (
<ArrowsContainer>
<ArrowWrapper
show={scrollPosition !== 0}
onClick={() => scrollToNext(ref.current, -1)}
>
<ChevronLeft style={{ width: 24, height: 24 }} />
</ArrowWrapper>
<ArrowWrapper
show={scrollPosition !== maxScrollValue}
onClick={() => scrollToNext(ref.current)}
>
<ChevronRight style={{ width: 24, height: 24 }} />
</ArrowWrapper>
</ArrowsContainer>
)}
</CarouselContainer>

Answer 1

Seems the
`&:first-child {
margin-left: ${rem(-20)};
}`
has an effect on both the left and the right arrows as you are targeting in both cases the <ChevronLeft /> and the <ChevronRight /> with the &:first-child selector. You can remove this from the ArrowWrapper styled component and add the margin in the style tag inside the <ChevronLeft /> and the <ChevronRight />