Layering elements on top of each other with css
I have been playing around with this sliding drop-down jquery menu. I moved the drop-down area up a little bit with a negative margin. I was hoping there would be a way to layer the drop down on top of the parent开发者_StackOverflow element that is the trigger for the action. I tried z-index but no luck. Anyone know what I am doing wrong?
Here it is live: 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;
}
you need to set the CSS property for the elements in question. Set position: relative for the "parent" element. Then apply a position: absolute to the "child" element.
This makes the child element "absolute" positioned "relative" to the parent. Then use CSS to position the child. eg.
left: 0;
top: 0;
which will match the top-left corners of the parent and child elements
In order for z-index to work on an element you have to be using the CSS property "position".
Try setting the menu's position to relative, z-index won't work on elements positioned as static, which they all are by default.
加载中,请稍侯......
精彩评论