如何使绝对定位元素与其溢出隐藏父级 .swiper-container 重叠？

Question

我的 SwiperJS 有问题。如何使绝对定位元素重叠其溢出：隐藏父级.swiper-container？

我的示例位于https://codepen.io/webspilka/pen/XWNLOjj

.swiper-container {
  // overflow: visible; - works, but I get horizontal scroll
  // overflow: visible;
  background: #004156;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  width: 340px;
  border: 1px solid #ffcc00;
  height: 300px;
  // background: rgba(#ffcc00, 0.2);
  background: #fffcbb;
  &::after {
    display: block;
    content: "overflow:hidden problem !!!";
    position: absolute;
    z-index: 100;
    width: 100%;
    top: 285px;
    height: 300px;
    background: #ff9ca1;
    color: #b40a1b;
    // transform: translate(75%, -75%);
  }
}

Answer 1

你需要覆盖

.swiper-backface-hidden .swiper-slide {
  translateZ(0);
}

和

.swiper-backface-hidden .swiper-slide {
  transform: initial !important; /* Important is optional, as long as this snippet is after the original */
}

并且也更改z-index: 100为负整数.swiper-slide::after

这是codepen上的一个可行的解决方案