jquery怎样固定位置
鼠标移上去，下面加个框多出来，鼠标移开这个div框又缩回去，我现在实现了，可是鼠标移上去弹出来了，下面的元素位置也下移了，怎样实现在下面的元素位置不动，仅仅是覆盖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <title>无标题文档</title> <script type="text/javascript"> $(function(){ $("#div1").mouseover(function(){ $("#div2").css({display:'inline', position:'absolute', "z-index":20, background:'red'}); }).mouseout(function(){ $("#div2").hide(); }) }) </script> </head> <body> <div id="div1">divfdsfdsafdsa</div> <div id="div2" style="display:none;z-index:20">div22</div> <div id="div3">div</div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <style type="text/css"> .button { position: relative; width: 100px; height: 20px; border: #7a340a 1px solid; background-color: #f7dfbb; } .menu { position: absolute; top: 21px; left: -1px; width: 100px; height: 120px; border: #ff3300 1px solid; background-color: #ffcc33; display:none; } .button:hover .menu { display:block; } </style> </head> <body> <div class="button"> xxxxxxxxxxxx <div class="menu"> aaaaaaaaaaaa<br /> aaaaaaaaaaaa<br /> aaaaaaaaaaaa<br /> aaaaaaaaaaaa<br /> aaaaaaaaaaaa<br /> </div> </div> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> dddddddddddd<br /> </body> </html>