如何讓滑塊內的圖像覆蓋正在進行的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的形象，這是沒有必要的。