positioning a new element beneath another

positioning a new element beneath another

Hi everyone,

I am working on a jQuery plugin which operates on the following markup:
  1. <ul>
  2.       <li class="item">
  3.             <a href="#">
  4.             <ul>
  5.                   <li class="item"></li>
  6.             </ul>
  7.       </li>
  8. </ul>
The entire outer <ul> element has a "z-index" value of 99 and all the rest of the elements inherit that value.

What I would like to do is insert a new div element in the DOM and position in under the <a> element. When I say "under" what I mean is not "below" but really under - same vertical and horizontal position on the page but the <div> underneath the <a> element.

I know that in a normal layout, this will be achieved with the "z-index" property, however I am not sure how this plays out for the <div> element.

I've played around with inserting the <div> element before and after the <a> element but it still shows up on top of the link rather then below it.

I appreciate your help!