z-index not working. How to get my text show ontop of the image

Question

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

Argumentum

Answer 1

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

Poling

Answer 2

Like mentioned add this to your css:

position: relative; 

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

Clericalism

Answer 3

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

Legist