求助jquery怎样固定这个位置

鼠标移上去，下面加个框多出来，鼠标移开这个div框又缩回去，我现在实现了，可是鼠标移上去弹出来了，下面的元素位置也下移了，怎样实现在下面的元素位置不动，仅仅是覆盖

解决方案 »

  1.   

    你可以用absolute + z-index 实现重叠<!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>
      

  2.   


    <!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>