z-index 在较小的尺寸下似乎无法正常工作

Question

在我正在处理的网站中，我有一些相当复杂的堆叠安排。 div 上的背景图像是一个渐变，它以较低的 zindex 覆盖其中的图像。像这样：

因此，这适用于较大的宽度。当宽度较小时，图像会出现在渐变背景上，如下所示：

发生了什么事，我不知道是什么。我使用 twitter Bootstrap 2.3.0 作为框架。链接：http://www.osullivans-pubs.com/draft

编辑：我很确定问题与图像上的负 z-index (#back img) 有关。但是 z-index 为零意味着图像出现在渐变上方...

更新：我解决了。让具有背景图像的元素与子元素重叠是不可能的。所以我在容器之前（并与容器分开）创建了一个绝对定位的元素，并对其应用了适当的 zindex。这样就解决了。

Answer 1

你必须在liquid-slider.css文件中添加一个z-index，下面是代码...

.liquid-slider-wrapper {
   margin: 0 auto;
   clear: both;
   overflow: auto;
   position: relative;
   width: 1110px !important;
   z-index: 20;
}