Order of z-index elements on bxslider

Question

I need to order the contents of a bxslider with a no-child element. between the image and the text over the top.

e.g

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

Could anyone advise on the z-index?

my existing css is similar to:

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

Thanks

Answer 1

I would try something along the lines of:

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

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

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

something along these lines, usually works for me when using z-index.

Hope this helps you.

Answer 2

My late reply... BXSlider has zIndexing within the JS (read more here: http://bxslider.com/docs/jquery.bxslider.html). The best way I have found to get around the flicker in any slide, whatever direction it appears in is if you nest your content inside the <ul> within another <div>. In my experiments, this seems to cause no distracting reordering of the visible or unwanted invisible layers.

Here's an example for your slides:

<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>

Note: z-index needs a position declaration to work at all.

Answer 3

This is an old question but the issue does come up quite a bit it seems. The issue isn't z-indexing:

You're most likely missing the image files

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

A quick check

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

Once you do this you'll see that the controls are there.