6

I am using royalslider. I have this

<a class="rsImg" data-rsDelay="1000" href="image.jpg">
  <span>This is caption <b>HTML1</b> text</span>
</a>

this works fine and put the text under the image. However, I want to show the text on top of the image. But when I move the text up, it goes under the picture not on top. I tried this

<a class="rsImg" data-rsDelay="1000" href="image.jpg" style="z-index:-10000 !important;">
  <span style="z-index:10000 !important;margin-top:-100px;">
    This is caption <b>HTML1</b> text
  </span>
</a>

but that didnt work. any help will be appreciated

Dylan
  • 13,645
  • 3
  • 40
  • 67
Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221

3 Answers3

14

From http://www.w3schools.com/cssref/pr_pos_z-index.asp

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Dylan
  • 13,645
  • 3
  • 40
  • 67
3

Like mentioned add this to your css: 

position: relative;

then it should work, in this case relative positioning is what I would use.

matt
  • 1,015
  • 4
  • 14
  • 28
1

The z-index does not work if you do not use position. It works best if you have called position absolute.

Luc Angevare
  • 25
  • 4
  • 17