JQuery Layered Animation Gets Out of the Box

Question

This jQuery animation works, except that a hidden element that is detected is automatically displayed on top of another visible element when it just needs to slip out from under that element.

--- |--------- | | | | | | |--------- --- 

but shows it as

 --- --------- | | | --------- --- 

code

 Arial; writing-mode: tb-rl; filter: flipH flipV; z-index: 80;"> <b>x-buttons</b> </p> </div> <!-- div id="xbuttons" style="border: 2px solid #404040; font-family: Arial; font-size: 0.9em; background-color: grey; position:absolute; top: 400px; left:20px; height: 120px; visibility: hidden; margin: 0px 0px 0px 0px;" --> <div id="xbuttons" style="border: 2px solid #404040; font-family: Arial; font-size: 0.9em; background-color: grey; position:absolute; top: 400px; left:-50px; height: 120px; visibility: hidden; margin: 0px 0px 0px 0px; z-index:70;"> <!-- Begin div for xbuttons --> <ul style="list-style-type: none; padding: 10px 5px 5px 5px; margin: 0px 0px 0px 0px;"> <li> <span id='clk1' class='clk'>paintAll()</span> </li> <li> <span id='clk2' class='clk'>showAll()</span> </li> <li> <span id='clk3' class='clk'>hideAll()</span> </li> <li> <span id='clk4' class='clk'>minimizeAll()</span> </li> <li> <span id='clk5' class='clk'>maximizeAll()</span> </li> <li> <span id='clk6' class='clk'>restoreAll()</span> </li> </ul> </div> <!-- End div for xbuttons --> <script type='text/javascript'> $(document).ready(function(){ $("#xbox").toggle(function(){ //Open menu $("#xbuttons").stop().animate({ left: "+=74" }, 1200) }, function(){ //Close menu $("#xbuttons").stop().animate({ left: "-=74" }, 1200) }); }); </script> 

I have specified the z-index for the elements. This does not seem to have any effect.

Answer 1

Click here for a simple demo! I am sure for you, this is something simple, because you only need what you need, z-index .