1

我需要使用无子元素订购 bxslider 的内容。在顶部的图像和文本之间。

例如

<div>
<ul id="slider">
<li><img src="image1.jpg" /><span>text</span></li>
</ul>
<div class="under-text-over-image"></div>
</div>

有人可以就 z-index 提出建议吗？

我现有的 CSS 类似于：

li img{
position:relative;
z-index:1;
}
li span{
position:relative;
z-index:3;
}
.under-text-over-image{
position:relative;
z-index:2;
}

谢谢

4

3 回答 3

0

我会尝试以下方式：

li img{
position:relative;
z-index:-99999;
}

li span{
position:relative;
z-index:99999;
}

.under-text-over-image{
position:relative;
z-index:11111;
}

沿着这些思路，在使用 z-index 时通常对我有用。

希望这对您有所帮助。

于 2013-04-30T15:41:25.257 回答
0

我迟到的回复...... BXSlider 在 JS 中有 zIndexing（在此处阅读更多信息：http://bxslider.com/docs/jquery.bxslider.html ）。我发现在任何幻灯片中绕过闪烁的最佳方法，无论它出现在哪个方向，如果您将内容嵌套<ul>在另一个<div>. 在我的实验中，这似乎不会导致对可见或不需要的不可见层进行令人分心的重新排序。

这是您的幻灯片示例：

<ul class="bxslider">
<li>
    <div style="position:absolute;z-index:88888;">
        ... this content will be above everything else ...
    </div>
</li>
    <li>
    <div style="position:absolute;z-index:88888;">
        ... this content will be also be above ...
    </div>
</li>
</ul>

注意：z-index 需要一个位置声明才能工作。

于 2014-03-17T16:24:26.370 回答
0

这是一个老问题，但似乎确实出现了很多问题。问题不在于 z 索引：

您很可能缺少图像文件

bx-wrapper .bx-prev {
  left: 10px;
  background: url(images/controls.png) no-repeat 0 -32px;
}

快速检查 

.bx-wrapper .bx-controls-direction a {
  background-color: blue;
}

执行此操作后，您会看到控件在那里。

于 2015-07-22T14:22:13.057 回答