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

css jquery-ui-slider jquery-slider
Asim Zaidi picture Asim Zaidi · Aug 14, 2012 · Viewed 7.3k times · Source

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

Answer

Dylan picture Dylan · Aug 14, 2012

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

Related questions

Change the width and height of jQuery slider

I want to change the width and height of jquery slider UI. I am using ui-lightness theme. I tried to override the default jquery.css by adding the following code in my style sheet. .ui-slider .ui-slider-horizontal { height: .6em; } .ui-slider .ui-slider-handle { …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More