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 の後ろに隠れているようです。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 はより高く、他の 2 つの div の上に表示されます。#header とその子をカバーしたくない場合は、#center divs z-index を headers 未満に設定します。

于 2013-03-16T16:55:22.790 に答える