上一个/下一个按钮位于引导模式中幻灯片内的图像下方答案

【问题标题】：Prev/Next buttons are under image inside slide in bootstrap modal上一个/下一个按钮位于引导模式中幻灯片内的图像下方
【发布时间】：2020-06-18 10:09:07
【问题描述】：

我的网站上有多个滑块实例，但其中一个特别让我头疼。考虑 webshop 并且所有滑块（畅销书、推荐等）都加载了 Swiper 滑块，仅在 iOS（iPhone 5、6 和 7）上，在引导模式中称为 prev/next 的滑块内部似乎存在问题按钮位于幻灯片下方 - 您可以看到它们，但您可以清楚地看到它们位于幻灯片下方或滑块的整个包装之下，有趣的是它可以在 iPhone 4 上运行。

我尝试在滑块初始化时更改 z-index 但这并没有改变任何东西，我可以看到 z-index 在检查元素中发生了更改，但在 iPhone 5、6 和 7 中没有任何更改。

我尝试在滑块初始化时更新导航，但也没有任何改变。

我重写了整个初始化代码，也没有修复它。

有人知道接下来要尝试什么吗？任何帮助将不胜感激。

【问题讨论】：

标签： javascript css slider swiper

【解决方案1】：

如果您尝试使用 z-index，请确保元素已定位（尝试位置调整）。另请查看是否设置了任何溢出属性，这会导致此行为。

【讨论】：

检查css后，prev/next按钮是绝对定位的，没有设置溢出属性，只在父容器上，取消设置会破坏滑块。
可以分享一下按钮和父级的css吗？
当然，here 是 CSS 的小提琴。
我发现一个修补程序设置为 -webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0 ,1) 解决问题。
哦，太好了。您可以发布自己的答案

【解决方案2】：

这个问题的解决方法有点奇怪，但是添加之后

-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);

prev 和 next 按钮被神奇地固定了。

首先是什么导致了这个问题仍然未知。

【讨论】：