Question

我需要使用no-child元素来命令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;
}

由于

Answer 1

我会尝试以下方式：

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时通常适合我。

希望这会对你有所帮助。

Answer 2

我迟到的回复...... 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需要一个位置声明才能工作。

Answer 3

这是一个老问题，但问题确实出现了很多。问题不在于z-indexing：

您很可能错过了图片文件

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

快速检查

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

执行此操作后，您将看到控件已存在。

bxslider上的z-index元素的顺序

3 个答案: