Question

以下是我的网络应用程序中的CSS类

#header {
    position:absolute;
    left:0px;
    top:0px;
    background:url(Images/header.png);
    background-size:100% 86%;
    width:100%;
    height:16%;
    z-index:200;
}
#centre {
    position:absolute;
    left:0px;
    top:16%;
    width:100%;
    height:80%;
        z-index:101;

}
#smoothmenu1 {
    position:absolute;
    right:0px;
    width:50%;
    bottom:0px;
    height:26px;
    z-index:180;
}

smoothmenu1 div嵌套在标题div中，平滑菜单div包含一个下拉菜单栏，由于某些原因，在下拉列表中，菜单项似乎是隐藏在中心div后面。我正在尝试在smoothmenu1 div中添加菜单栏，如此处所示。 http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

以下是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" />

<link rel="stylesheet" type="text/css" href="CSS/ddsmoothmenu.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="JS/ddsmoothmenu.js"> </script>
<script type="text/javascript">
ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
$(document).ready(function() {
                $('#centre').load("initCentre.html"); 
});
</script>
<style type="text/css">
<!--
#main {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:1;
}
#header {
    position:absolute;
    left:0px;
    top:0px;
    background:url(Images/header.png);
    background-size:100% 88%;
    width:100%;
    height:14%;
    z-index:250;
}
#centre {
    position:absolute;
    left:0px;
    top:16%;
    width:100%;
    height:82%;
        z-index:300;

}
#smoothmenu1 {
    position:absolute;
    right:0px;
    width:50%;
    bottom:0px;
    height:26px;
    z-index:220;
}
#footer {
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height:4%;
    z-index:2;
}
-->
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">menu3</a>
  <ul>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com">menu2</a>
  <ul>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.1</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.2</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.3</a></li>
  <li><a href="http://www.dynamicdrive.com">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="http://www.dynamicdrive.com">menu1</a></li>
<li><a href="http://www.dynamicdrive.com/style/">menu3</a></li>
</ul>
<br style="clear: left" />
</div>
</div>
<div id="centre"></div>
</div>

</body>
</html>

Answer 1

您的#centre元素的z-index更高 - 请尝试切换它们。

稍微偏离主题：尽可能在没有absolute元素的情况下布置文档。

Answer 2

您的#center的z-index为300，但#header和#smoothmenu分别为250和220。 300更高，使其显示在其他两个div的顶部。如果你不希望它覆盖#header和它的子节点，那么将#center divs z-index设置为小于标题。

Div下隐藏的下拉菜单

2 个答案: