logo标签列表

一个DIV标签可以被设置为不将下方的对象向下推吗？

jqueryhtmlcss
3

以下是图片中的问题：

enter image description here

即将点击 Modify 按钮，然后：

enter image description here

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

有没有一种功能可以使下拉框在下面的对象上方浮动？

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

首先是 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
6
绝对定位和相对定位是你要寻找的。 - jeremy
4
请查看绝对定位。 - j08691
1
请注意 z-index。 - ayyp
1
@DKean - z-index 控制的是它听起来的意思 - Z 轴索引。它与可见性无关...除非你在代码中使用它将事物放置在某个可见元素点以下。 - Kai Qing
1
您的菜单使用绝对定位不会影响整个布局的定位。 - j08691
显示剩余9条评论
2个回答
4
您可以使用 position:absolute。
<div style="position: absolute;">
    <div id="modify" >
     ...
    </div>
</div>
or 

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

同时您需要使用 z-index 属性。

你的答案似乎可行，尽管我在竞争对象的z-index之间有一个仲裁问题。但我认为我可以解决这个问题！非常感谢@Mahmut。 - DKean
1
尝试在`.listmenu`上使用`position:absolute`。
在列表菜单上它不起作用。然而@Mahmut的建议似乎有效... - DKean
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接