如何获取滑块内的图像以覆盖进程 div？

Question

我无法让滑块右侧的图像覆盖下面的 div。我使用了各种不同的位置和 z-index 变量，但无法正常工作。

我使用的滑块图像：

.overlay-img{
position:absolute;
right:0;
z-index:9999;
top:-300px;}

我正在使用以下 div（在下方）：

.lower-stack{
position:relative;
z-index:1;}

Effect I'm trying to achieve (image)。任何帮助表示赞赏。我错过了什么？

Answer 1

swipper 的最外层包装器有 overflow: hidden，这可以防止子内容在其边界外可见。

.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

您可以考虑为该特定容器添加一个 id，并使其成为 overflow: visible:

#newID{
    overflow: visible;
}

执行此操作时，幻灯片开始显示在页面右侧，并出现水平滚动条。要解决此问题，请将 overflow: hidden 添加到 .mainContent:

.mainContent{
    overflow: hidden;
}

不要给图片设置z-index: 9999，不需要。

How to get image within a slider to overlay proceeding div?