如何让滑块内的图像覆盖正在进行的div？

Question

我无法获得滑块右侧的图像以覆盖下面的div。我已经使用了各种不同的位置和z-index变量，并且无法使其工作。

Live Site

我使用滑块图片内容：

.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的形象，这是没有必要的。