Question

我一直在玩这个滑动下拉式jquery菜单。我将下拉区域向上移动了一点，带有负边距。我希望有一种方法可以将下拉分层放在作为操作触发器的父元素的顶部。我试过z-index但没有运气。谁知道我做错了什么？

这是现场：http://daveywhitney.com/overlay/sliding_menu.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Menu Tutorial | HV-DESIGNS.CO.UK</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

</head>

<body>
<div id="container">
<div id="header">
</div>

<div id="button">
<div id="trigger">
<img src="images/button.png" width="184" height="32" class="menu_class" />
</div>
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>
</div>

</div>
</body>
</html>

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

#container {
    margin: auto;
    width: 490px;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;

}
#trigger {
    z-index:-1;
}
.the_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
    margin:-50px 0 0 50px;
    z-index:100;
}

.the_menu li {
    background-color: #302f2f;
}

.the_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

Answer 1

您需要为相关元素设置CSS属性。为“parent”元素设置position: relative。然后将position: absolute应用于“child”元素。

这使得子元素“绝对”位于父亲的“相对”位置。然后使用CSS来定位孩子。例如

left: 0;
top: 0;

将匹配父元素和子元素的左上角

Answer 2

要让z-index处理您必须使用the CSS property "position"的元素。

Answer 3

尝试将菜单的position设置为relative，z-index不会对定位为static的元素起作用，默认情况下它们都是。

用css将彼此叠加的元素分层

3 个答案: