0

以下是我的 Web 应用程序中的 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>
4

2 回答 2

1

你的#centre元素有一个更高的z-index- 尝试切换它们。

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

于 2013-03-16T16:52:38.080 回答
1

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

于 2013-03-16T16:55:22.790 回答