overflow-x:hidden轮播使用负margin定位箭头被遮挡如何解决

开发带切换箭头的轮播组件时，使用负margin定位箭头希望获得更美观的视觉效果，但箭头被轮播容器隐藏，设置z-index: 9999无效，且轮播的overflow-x属性不能设置为visible。

原有实现代码如下：

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>

• 只要元素设置了overflow: hidden/auto/scroll（非visible值），就会裁剪所有超出自身边界的子元素，这个行为不受z-index控制。z-index仅能调整同一层叠上下文内元素的显示层级，无法突破父级的overflow裁剪规则。
• 原有实现通过给箭头加负margin实现外凸效果，但箭头容器宽度和轮播容器宽度一致，负margin偏移后的箭头部分位置和设置了overflow-x: hidden的CarouselWrapper区域重叠，加上箭头容器未设置更高层级，最终被裁剪/遮挡。

不需要修改CarouselWrapper的overflow属性，也不需要用负margin，直接调整箭头容器的定位范围，让箭头完全处于CarouselWrapper的上层、且不会进入其overflow裁剪区域即可，具体修改如下：

1. 调整ArrowsContainer的样式，去掉固定的width: 100%，通过左右偏移值让容器比轮播区域宽出箭头需要外凸的距离，同时设置z-index确保箭头在轮播内容上层：

const ArrowsContainer = styled.div`
  display: flex;
  align-items: center;
  position: absolute;
  /* 替换原有width:100%，左右各留出20px的外凸空间 */
  left: ${rem(-20)};
  right: ${rem(-20)};
  justify-content: space-between;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10; /* 确保箭头在轮播内容上层 */
`;

2. 删除ArrowWrapper中给左箭头设置的负margin规则，右箭头如果有同类负margin也一并删除：

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设置 */
`;

3. 确认最外层CarouselContainer保持默认overflow: visible（不要加overflow:hidden规则），裁剪逻辑完全交给内部的CarouselWrapper处理即可。

修改后箭头会自然落在轮播区域左右外侧，既不会被overflow裁剪，也完全符合设计要求的overflow-x规则，点击事件也能正常触发。

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