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

        
                      

              相关标签:
       
      

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

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.

Answer 3

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.