Question

以下是图片中的问题：

enter image description here

即将点击Modify按钮，瞧：

enter image description here

点击Modify会导致下面的其他对象向下移动：

是否有功能可以将下拉框设置为FLOAT以下对象？

以下是与此案相关的所有代码......

首先是HTML部分：

<body>
<div id="zMenu" class="relDiv" style="position:relative; width:800px; top:34px;">
    <ul id="navlist" style="position:relative; height:30px; display:block;">
        <li id="leader"></li>  
        <li id="home" ><a href="javascript:showImportWin()"><span style="position:relative; left:0px; top:7px;"> &nbsp;&nbsp;Import</span></a></li>
        <li id="home2"><a href="javascript:showExportWin()"><span style="position:relative; left:6px; top:7px;">Export</span></a></li>
        <li id="home3"><a href="http://clients.jic.com/reports" ><span style="position:relative; left:5px; top:7px;">Proxy Reports</span></a></li>
        <li id="home4"><a href="javascript:helpScreen()"><span style="position:relative; left:6px; top:7px;">Help</span></a></li>
        <li id="home5"><a href="javascript:showModify()"><span style="position:relative; left:3px; top:7px;">Modify</span></a></li>
        <li id="home6"><a href="http://clients.jic.com/reports/logout"><span style="position:relative; left:5px; top:7px;">Logout</span></a></li>
    </ul>
    <div id="modify" >
        <div class="listmenu">
            <ul>
                <li><a onclick="JavaScript:hideModify('Settings')">Settings</a></li>
                <li><a onclick="JavaScript:hideModify('Funds')">Funds</a></li>
                <li><a onclick="JavaScript:hideModify('Listings')">Listings</a></li>
                <li><a onclick="JavaScript:hideModify('Report')">Report Details</a></li>
            </ul>
        </div>
    </div>
</div>

现在，CSS部分：

#modify {
    position: inherit;
    top:-30px;
    z-index:1050;
    /*background-image: url(../static/SearchHeader3.png);*/
    left:515px;
    /*height: 100px;*/
    width: 120px;
    background-color :#fff;
    border: 1px solid #aaa;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0px 0px 10px #ccc;
    -moz-box-shadow: 0px 0px 10px #ccc;
    box-shadow: 0px 0px 10px #ccc;
    overflow-x:hidden;
    overflow-y: visible;

}

.listmenu ul {
    margin: 0 0 0px 0;
    padding: 0 0 2px 0;
    list-style-type: none;
    width:120px;
    text-align: left;
}

.listmenu li a {
    color: #333;
    display: block;
    border-left:3px solid #fff;
    border-right:3px solid #fff;
    /*height: 16px;*/
    padding: 4px 0 4px 14px;
    text-decoration: none;
    font-weight:bold;
    background-color:#fff;
}

.listmenu li a:hover {
    background-color: #fec;
    color:#a2a;
}

非常感谢你的帮助，

DK

Answer 1

您可以使用position:absolute

<div style="position: absolute;">
    <div id="modify" >
     ...
    </div>
</div>
or 

<div id="modify" style="position: absolute;">
 ...
</div>

您需要使用z-index。

Answer 2

尝试在position:absolute上使用.listmenu。

可以设置DIV标签，以便不将下面的物体推下来吗？

2 个答案: