jquery got me stumped, again - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=40429.0&return_msg=40429.5"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=40429.1">1–6</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=40429.5">jquery got me stumped, again</a> </h3> <div id="messages" data-navigation="40429_5_6_10"> <a name="a40429_5"></a><div class="message" id="message_40429_5"> <div class="message_header"> <div class="message_from"> From: Matt<span class="message_time"> 4 Apr 2013 21:07</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 4 Apr 2013 22:36"></span></span> <span class="message_count">5 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.5">40429.5</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.4">40429.4</a></div> <div class="message_body"> The problem with z-index is that it is relative. By moving the div so it's a child of the body tag, it will have a relative z-index to elements that are also children of the body tag and not of the body tag's siblings' children.<br /><br /> See <a href="http://stackoverflow.com/a/7482870">http://stackoverflow.com/a/7482870</a> for a good explanation.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.5&return_msg=40429.5" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.5"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40429_6"></a><div class="message" id="message_40429_6"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 5 Apr 2013 14:58</span> <div class="clearer"></div> </div><div class="message_to">To: Matt <span><span class="image post_read" title="Read: 5 Apr 2013 16:13"></span></span> <span class="message_count">6 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.6">40429.6</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.5#a40429_5" target="_self">40429.5</a></div> <div class="message_body"> I managed to get it working by overrridng the bPopup "append" function (with a handy parameter), and using JQuery clone() and remove().</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.6&return_msg=40429.5" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.6"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> </div> </body>