div overlap

div overlap

Hi guys,

I have the follow page:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. </head>
  7. <body>
  8. <div id="id1">
  9.     <a href="#" id="button">Click</a>
  10.     <div id="id1intern" style="display:none">
  11.         <a href="#"><img name="test" id="test" src="test.jpg" alt="test"/></a>
  12.     </div>
  13. </div>
  14. <div id="id2" style="position:absolute">
  15.     <a href="#"><img name="test2" id="test2" src="test.gif" alt="test"/></a>
  16. </div>
  17. </body>
  18.   <script type="text/javascript">
  19.     $(function(){
  20.         $('#button').click(function(){
  21.             $('#id2').css('z-index', '1');
  22.             $('#id1').css('z-index', '2');
  23.             $('#id1intern').css('z-index', '3');
  24.             $('#id1intern').slideToggle('medium');
  25.         });
  26.     });
  27.   </script>
  28. </html>
I'm trying to show #id1intern (previously hidden) and make it overlap #id2. My tests have shown that #id2 is moved to the bottom. I have tried to apply the "z-index" property to the divs, but I couldn't get to work. Anyone got a tip if this is possible and how to make this work?
Thanks in advance.