请教一个关于 Z-INDEX 属性的问题!

136com · 发表于 2009-6-29 10:18:23

周末的时候制作中遇到了一个问题；
就是我有几个DIV使用了 Z-INDEX 属性，
发现有个在IE下总是在另一个的下面，无论怎么设置他们的值；

特来请教下，怎么让蓝色的那个下拉菜单层在上面？
现在有部分被灰色那个层遮住了!

代码见二楼！

[[i] 本帖最后由 136com 于 2009-6-29 15:00 编辑 ]

136com · 发表于 2009-6-29 10:18:56

<!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>
<link rel="stylesheet" type="text/css" href="style/master.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵州我们的_贵州我们的</title>
<style type=text/css>
body {
	margin:0 auto;
}
* {
	margin:0;
	padding:0;
}
div,ul,li,dl,dt,dd { 
	font-size:14px; 
	font-family:"宋体",arial;
	list-style-type:none;
}
#wrap {
	width:1002px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/bg.gif) scroll repeat-y  0px 0px;
	height:100%;
	margin:0 auto;	
}
#wrap #wraper {
	width:950px;
	margin:0 0 0 25px;
}
/* 导航 */
#wraper .top .top_img {
	height:139px;
	width:950px;
}
#wraper .top .nav {
	height:37px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_bg.gif) scroll repeat-y  0px 0px;
}
#wraper .top .nav .navlist {
	float:left;
}
#wraper .top .nav .navlist ul {
	padding-top:13px;
}
#wraper .top .nav .navlist ul li {
	float:left;
	width:90px;
	text-align:center;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_line.gif) scroll no-repeat right 0px;
	position:relative;
	padding: 0;
}
#wraper .top .nav .navlist ul .navlist_big {
	width:80px;
}
#wraper .top .nav a {
	width: 90px;
	text-align:center;
	overflow:hidden;
	padding: 0;
}
#wraper .top .nav .navlist ul li a:link { 
	font-size:14px;
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}

#wraper .top .nav .navlist ul li a:visited { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:active { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:underline; 
	color:#2E0175;
}
#wraper .top .nav .navlist ul li a:hover { 
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
	color:#2E0175;
}
#wraper .top .nav .navdate {
	float:right;
	padding:13px 10px 0 0;
}
#wraper .top .nav .navdate span {
	font-size:12px;
}

#wraper .top .nav .navlist ul li ul {
	 width: 90px;
	 line-height: 27px;
	 list-style-type: none;
	 text-align:left;
	 position: absolute;
	display:none;
	z-index: 9999;
	top: 12px;
	left: 0px;
}
#wraper .top .nav .navlist ul li ul li{
	 float: left;
	 width: 90px;
	 background: #03b2e3;
	border: #dbdbdb 1px solid;
	border-top: 0;
}
#wraper .top .nav .navlist ul li ul a {
	 display: block;
	 width: 90px;
	 text-align:center;
}
#wraper .top .nav .navlist ul li ul a:link  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:visited  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:hover  {
	 color:#F3F3F3;
	 text-decoration:none;
	 font-weight:bold;
	 background:#991F1E;
}
#wraper .top .nav .navlist ul li:hover ul {
	 left:0;
	 display:block;
	 top:11px;
	z-index: 9;
}

/* 公告和搜索 */
#wraper .top .gonggao {
	margin-top:2px;
	height:27px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/gonggao_nav.gif) scroll repeat-x 0 0;
}

#main {
	height:714px;
	}
/* 左边 */
#maina {
	margin:10px 0 0 0px;
	float:left;
	width:241px;
}
#maina .flash {
	margin-left:1px;
	height:212px;
	background:#FAF4F0;
	border:1px solid #B6C8CA;
}

/* 中 */
#mainb {
	width:453px;
	height:704px;
	float:left;
	margin:10px 0 0 7px;
}
#mainb .mainb_1 {
	width:451px;
	height:314px;
	border:1px solid #DBDBDB;
}

.flashNews {
	padding-right: 5px;
	OVERFLOW: hidden;
	WIDTH: 444px;
	POSITION: relative;
	HEIGHT: 314px;
	Z-INDEX: 1;
	border: #dbdbdb 1px solid;
}
.flashNews IMG {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 420px; HEIGHT: 306px
}
.flashNews .bg {
	BACKGROUND: #000000;
	LEFT: 24px;
	WIDTH: 420px;
	BOTTOM: 3px;
	POSITION: absolute;
	HEIGHT: 73px;
	_bottom: 3px;
	opacity:0.38;
	filter:Alpha(opacity=38);
	Z-INDEX: 1;
}
.flashNews H3 {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 415px;
	LINE-HEIGHT: 35px;
	POSITION: absolute;
	TOP: 240px;
	HEIGHT: 32px
}
.flashNews H3 A {
	FONT-WEIGHT: normal; FONT-SIZE: 20px; COLOR: #ffffff; FONT-FAMILY: "黑体"
}
.flashNews H3 A:hover {
	COLOR: #f20000
}
.flashNews P {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 412px;
	LINE-HEIGHT: 20px;
	POSITION: absolute;
	TOP: 268px;
	HEIGHT: 32px
}
.flashNews P A {
	COLOR: #ffffff
}
.flashNews P A:hover {
	COLOR: #f20000
}

.flashNews .pager {
	float: left;
	width: 18px;
	height: 312px;
	Z-INDEX: 1;
	background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
	POSITION: absolute;
	padding: 1px 0 0 1px;
	left: 1px;
	RIGHT: 430px;
	BOTTOM: 1px;
	_bottom: 1px;
	/*_background: #ece9d8;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop');
	/*overflow: hidden;*/
}
.flashNews .pager A {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
	FLOAT: left; 
	MARGIN-LEFT: 1px; 
	WIDTH: 15px; 
	HEIGHT: 42px;
	padding-top: 16px;
	COLOR: #000000; 
	FONT-FAMILY: Tahoma; 
	TEXT-ALIGN: center
}
.flashNews .pager A:hover {
	COLOR: #ffffff
}
.flashNews .pager A.currA {
	COLOR: #ffffff
}
#SwitchPicContainer {
	float: right;
	padding-top: 3px;
}
.flashNews .pager {
background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
}
.flashNews .pager A {
FONT-WEIGHT: bold; 
FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
FLOAT: left; 
MARGIN-LEFT: 1px; 
WIDTH: 15px; 
HEIGHT: 42px;
padding-top: 16px;
COLOR: #000000; 
FONT-FAMILY: Tahoma; 
TEXT-ALIGN: center
}
.flashNews .pager A:hover {
COLOR: #ffffff
}
.flashNews .pager A.currA {
COLOR: #ffffff
}

#wraper #copy {
	margin:0 auto;
	margin-top:10px;
	width:946px;
	height:129px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/copy_bg.gif) scroll repeat-x;
	border:1px solid #2688DD;
	border-bottom:0;
}
#wraper #copy p {
	text-align:center;
	line-height:30px;
	padding-top:35px;
	font-size:12px;
	font-weight:normal;
	color:#2F3436;
}
#wraper #copy p a {
	font-size:12px;
	color:#2F3436;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wraper">
      <div class="top">
        <div class="top_img"></div>
        <div class="nav">
        <div class="navlist">
               <ul>
<li class="navlist_big"><a href="/">首页</a></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">我们的概况</a>
            <ul>
            	<li><a href="#">我们的简介</a></li>
                <li><a href="#">荣誉榜</a></li>
                <li><a href="#">领导介绍</a></li>
                <li><a href="#">组织机构</a></li>
                <li><a href="#">通讯方式</a></li>
            </ul></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">展区简介</a>
            <ul>
            	<li><a href="#">天文地理</a></li>
                <li><a href="#">万物之灵</a></li>
                <li><a href="#">未来探索</a></li>
                <li><a href="#">黔贵大地</a></li>
                <li><a href="#">少儿科技园</a></li>
            </ul>
</li>
                 <li><a href="#">4D影院</a></li>
                 <li><a href="#">信息中心</a></li>
                 <li><a href="#">科学乐园</a></li>
                 <li class="navlist_big"><a href="#">学术·培训</a></li>
                 <li><a href="#">游客服务</a></li>
               </ul>
        </div>
           <div class="navdate"><span></span></div>  
      </div>
        <div class="gonggao"></div>
        <div class="clear"></div>
      </div>

<div id="pic">
  <div class=flashNews>
    <div class=pager id=FlashSwitchPageNav></div>
    <div class=box>
    <div id=SwitchPicContainer></div>
    <h3 id=SwitchTitle_title></h3>
    <p id=SwitchTitle_stitle></p>
    <div class=bg></div>
    </div>
  </div>
</div>
            </div>
            
            
            
          
            <div class="clear"></div>
        </div>
        
        
      
</div>
<div id="copy">
       	<p>Copyright &copy; 2008-2010, Gzkjg.NET, All Rights Reserved<br />
贵州我们的版权所有    <a href="http://www.miibeian.gov.cn/" target="_blank">黔ICP证090888号</a><br />
        建议使用1024*768的分辨率   IE6.0以上版本的浏览器 </p>       </div>
        
    </div>
</div>

</body>
</html>

提示：您可以先修改部分代码再运行

[[i] 本帖最后由 136com 于 2009-6-29 10:22 编辑 ]

136com · 发表于 2009-6-29 10:59:15

继续请教下

zeratul1 · 发表于 2009-6-29 11:15:47

<!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>
<link rel="stylesheet" type="text/css" href="style/master.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵州我们的_贵州我们的</title>
<style type=text/css>
body {
	margin:0 auto;
}
* {
	margin:0;
	padding:0;
}
div,ul,li,dl,dt,dd { 
	font-size:14px; 
	font-family:"宋体",arial;
	list-style-type:none;
}
#wrap {
	width:1002px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/bg.gif) scroll repeat-y  0px 0px;
	height:100%;
	margin:0 auto;	
}
#wrap #wraper {
	width:950px;
	margin:0 0 0 25px;
}
/* 导航 */
#wraper .top .top_img {
	height:139px;
	width:950px;
}
#wraper .top .nav {
	height:37px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_bg.gif) scroll repeat-y  0px 0px;
}
#wraper .top .nav .navlist {
	float:left;
}
#wraper .top .nav .navlist ul {
	padding-top:13px;
}
#wraper .top .nav .navlist ul li {
	float:left;
	width:90px;
	text-align:center;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_line.gif) scroll no-repeat right 0px;
	position:relative;
	padding: 0;
}
#wraper .top .nav .navlist ul .navlist_big {
	width:80px;
}
#wraper .top .nav a {
	width: 90px;
	text-align:center;
	overflow:hidden;
	padding: 0;
}
#wraper .top .nav .navlist ul li a:link { 
	font-size:14px;
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:visited { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:active { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:underline; 
	color:#2E0175;
}
#wraper .top .nav .navlist ul li a:hover { 
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
	color:#2E0175;
}
#wraper .top .nav .navdate {
	float:right;
	padding:13px 10px 0 0;
}
#wraper .top .nav .navdate span {
	font-size:12px;
}
#wraper .top .nav .navlist ul li ul {
	 width: 90px;
	 line-height: 27px;
	 list-style-type: none;
	 text-align:left;
	 position: absolute;
	display:none;
	z-index: 9999;
	top: 12px;
	left: 0px;
}
#wraper .top .nav .navlist ul li ul li{
	 float: left;
	 width: 90px;
	 background: #03b2e3;
	border: #dbdbdb 1px solid;
	border-top: 0;
}
#wraper .top .nav .navlist ul li ul a {
	 display: block;
	 width: 90px;
	 text-align:center;
}
#wraper .top .nav .navlist ul li ul a:link  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:visited  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:hover  {
	 color:#F3F3F3;
	 text-decoration:none;
	 font-weight:bold;
	 background:#991F1E;
}
#wraper .top .nav .navlist ul li:hover ul {
	 left:0;
	 display:block;
	 top:11px;
	z-index: 9;
}
/* 公告和搜索 */
#wraper .top .gonggao {
	position:relative;
	z-index:100;
	margin-top:2px;
	height:27px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/gonggao_nav.gif) scroll repeat-x 0 0;
}
#main {
	height:714px;
	}
/* 左边 */
#maina {
	margin:10px 0 0 0px;
	float:left;
	width:241px;
}
#maina .flash {
	margin-left:1px;
	height:212px;
	background:#FAF4F0;
	border:1px solid #B6C8CA;
}
/* 中 */
#mainb {
	width:453px;
	height:704px;
	float:left;
	margin:10px 0 0 7px;
}
#mainb .mainb_1 {
	width:451px;
	height:314px;
	border:1px solid #DBDBDB;
}
.flashNews {
	padding-right: 5px;
	OVERFLOW: hidden;
	WIDTH: 444px;
	POSITION: relative;
	HEIGHT: 314px;
	Z-INDEX: 1;
	border: #dbdbdb 1px solid;
}
.flashNews IMG {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 420px; HEIGHT: 306px
}
.flashNews .bg {
	BACKGROUND: #000000;
	LEFT: 24px;
	WIDTH: 420px;
	BOTTOM: 3px;
	POSITION: absolute;
	HEIGHT: 73px;
	_bottom: 3px;
	opacity:0.38;
	filter:Alpha(opacity=38);
	Z-INDEX: 1;
}
.flashNews H3 {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 415px;
	LINE-HEIGHT: 35px;
	POSITION: absolute;
	TOP: 240px;
	HEIGHT: 32px
}
.flashNews H3 A {
	FONT-WEIGHT: normal; FONT-SIZE: 20px; COLOR: #ffffff; FONT-FAMILY: "黑体"
}
.flashNews H3 A:hover {
	COLOR: #f20000
}
.flashNews P {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 412px;
	LINE-HEIGHT: 20px;
	POSITION: absolute;
	TOP: 268px;
	HEIGHT: 32px
}
.flashNews P A {
	COLOR: #ffffff
}
.flashNews P A:hover {
	COLOR: #f20000
}
.flashNews .pager {
	float: left;
	width: 18px;
	height: 312px;
	Z-INDEX: 1;
	background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
	POSITION: absolute;
	padding: 1px 0 0 1px;
	left: 1px;
	RIGHT: 430px;
	BOTTOM: 1px;
	_bottom: 1px;
	/*_background: #ece9d8;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop');
	/*overflow: hidden;*/
}
.flashNews .pager A {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
	FLOAT: left; 
	MARGIN-LEFT: 1px; 
	WIDTH: 15px; 
	HEIGHT: 42px;
	padding-top: 16px;
	COLOR: #000000; 
	FONT-FAMILY: Tahoma; 
	TEXT-ALIGN: center
}
.flashNews .pager A:hover {
	COLOR: #ffffff
}
.flashNews .pager A.currA {
	COLOR: #ffffff
}
#SwitchPicContainer {
	float: right;
	padding-top: 3px;
}
.flashNews .pager {
background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
}
.flashNews .pager A {
FONT-WEIGHT: bold; 
FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
FLOAT: left; 
MARGIN-LEFT: 1px; 
WIDTH: 15px; 
HEIGHT: 42px;
padding-top: 16px;
COLOR: #000000; 
FONT-FAMILY: Tahoma; 
TEXT-ALIGN: center
}
.flashNews .pager A:hover {
COLOR: #ffffff
}
.flashNews .pager A.currA {
COLOR: #ffffff
}
#wraper #copy {
	margin:0 auto;
	margin-top:10px;
	width:946px;
	height:129px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/copy_bg.gif) scroll repeat-x;
	border:1px solid #2688DD;
	border-bottom:0;
}
#wraper #copy p {
	text-align:center;
	line-height:30px;
	padding-top:35px;
	font-size:12px;
	font-weight:normal;
	color:#2F3436;
}
#wraper #copy p a {
	font-size:12px;
	color:#2F3436;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wraper">
      <div class="top">
        <div class="top_img"></div>
        <div class="nav">
        <div class="navlist">
               <ul>
<li class="navlist_big"><a href="/">首页</a></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">我们的概况</a>
            <ul>
            	<li><a href="#">我们的简介</a></li>
                <li><a href="#">荣誉榜</a></li>
                <li><a href="#">领导介绍</a></li>
                <li><a href="#">组织机构</a></li>
                <li><a href="#">通讯方式</a></li>
            </ul></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">展区简介</a>
            <ul>
            	<li><a href="#">天文地理</a></li>
                <li><a href="#">万物之灵</a></li>
                <li><a href="#">未来探索</a></li>
                <li><a href="#">黔贵大地</a></li>
                <li><a href="#">少儿科技园</a></li>
            </ul>
</li>
                 <li><a href="#">4D影院</a></li>
                 <li><a href="#">信息中心</a></li>
                 <li><a href="#">科学乐园</a></li>
                 <li class="navlist_big"><a href="#">学术·培训</a></li>
                 <li><a href="#">游客服务</a></li>
               </ul>
        </div>
           <div class="navdate"><span></span></div>  
      </div>
        <div class="gonggao"></div>
        <div class="clear"></div>
      </div>
<div id="main">
       <div id="maina">
       	<div class="flash">
         
        </div>
            <div class="clear"></div>
      </div>
        
        
        <div id="mainb">
        	<div class="mainb_1">
<div id="pic">
  <div class=flashNews>
    <div class=pager id=FlashSwitchPageNav></div>
    <div class=box>
    <div id=SwitchPicContainer></div>
    <h3 id=SwitchTitle_title></h3>
    <p id=SwitchTitle_stitle></p>
    <div class=bg></div>
    </div>
  </div>
</div>
            </div>
            
            
            
          
            <div class="clear"></div>
        </div>
        
        
      
</div>
<div id="copy">
       	<p>Copyright &copy; 2008-2010, Gzkjg.NET, All Rights Reserved<br />
贵州我们的版权所有    <a href="http://www.miibeian.gov.cn/" target="_blank">黔ICP证090888号</a><br />
        建议使用1024*768的分辨率   IE6.0以上版本的浏览器 </p>       </div>
        
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

是不是这个意思？
这样下拉菜单中的二级导航不是看不到了吗？

136com · 发表于 2009-6-29 12:57:11

楼上的理解错了
是让下拉菜单在最上面

136com · 发表于 2009-6-29 15:00:36

期待赐教!

y7l8 · 发表于 2009-6-29 15:06:14

看看是不是这个意思，

<!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>
<link rel="stylesheet" type="text/css" href="style/master.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵州我们的_贵州我们的</title>
<style type=text/css>
body {
	margin:0 auto;
}
* {
	margin:0;
	padding:0;
}
div,ul,li,dl,dt,dd { 
	font-size:14px; 
	font-family:"宋体",arial;
	list-style-type:none;
}
#wrap {
	width:1002px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/bg.gif) scroll repeat-y  0px 0px;
	height:100%;
	margin:0 auto;	
}
#wrap #wraper {
	width:950px;
	margin:0 0 0 25px;
}
/* 导航 */
#wraper .top .top_img {
	height:139px;
	width:950px;
}
#wraper .top .nav {
	height:37px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_bg.gif) scroll repeat-y  0px 0px;
}
#wraper .top .nav .navlist {
	float:left;
}
#wraper .top .nav .navlist ul {
	padding-top:13px;
}
#wraper .top .nav .navlist ul li {
	float:left;
	width:90px;
	text-align:center;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_line.gif) scroll no-repeat right 0px;
	position:relative;
	padding: 0;
         z-index:2;
}
#wraper .top .nav .navlist ul .navlist_big {
	width:80px;
}
#wraper .top .nav a {
	width: 90px;
	text-align:center;
	overflow:hidden;
	padding: 0;
}
#wraper .top .nav .navlist ul li a:link { 
	font-size:14px;
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:visited { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:active { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:underline; 
	color:#2E0175;
}
#wraper .top .nav .navlist ul li a:hover { 
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
	color:#2E0175;
}
#wraper .top .nav .navdate {
	float:right;
	padding:13px 10px 0 0;
}
#wraper .top .nav .navdate span {
	font-size:12px;
}
#wraper .top .nav .navlist ul li ul {
	 width: 90px;
	 line-height: 27px;
	 list-style-type: none;
	 text-align:left;
	 position: absolute;
	display:none;
	z-index: 9999;
	top: 12px;
	left: 0px;
}
#wraper .top .nav .navlist ul li ul li{
	 float: left;
	 width: 90px;
	 background: #03b2e3;
	border: #dbdbdb 1px solid;
	border-top: 0;
}
#wraper .top .nav .navlist ul li ul a {
	 display: block;
	 width: 90px;
	 text-align:center;
}
#wraper .top .nav .navlist ul li ul a:link  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:visited  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:hover  {
	 color:#F3F3F3;
	 text-decoration:none;
	 font-weight:bold;
	 background:#991F1E;
}
#wraper .top .nav .navlist ul li:hover ul {
	 left:0;
	 display:block;
	 top:11px;
	z-index: 9;
}
/* 公告和搜索 */
#wraper .top .gonggao {
	margin-top:2px;
	height:27px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/gonggao_nav.gif) scroll repeat-x 0 0;
}
#main {
	height:714px;
	}
/* 左边 */
#maina {
	margin:10px 0 0 0px;
	float:left;
	width:241px;
}
#maina .flash {
	margin-left:1px;
	height:212px;
	background:#FAF4F0;
	border:1px solid #B6C8CA;
}
/* 中 */
#mainb {
	width:453px;
	height:704px;
	float:left;
	margin:10px 0 0 7px;
}
#mainb .mainb_1 {
	width:451px;
	height:314px;
	border:1px solid #DBDBDB;
}
.flashNews {
	padding-right: 5px;
	OVERFLOW: hidden;
	WIDTH: 444px;
	POSITION: relative;
	HEIGHT: 314px;
	Z-INDEX: 1;
	border: #dbdbdb 1px solid;
}
.flashNews IMG {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 420px; HEIGHT: 306px
}
.flashNews .bg {
	BACKGROUND: #000000;
	LEFT: 24px;
	WIDTH: 420px;
	BOTTOM: 3px;
	POSITION: absolute;
	HEIGHT: 73px;
	_bottom: 3px;
	opacity:0.38;
	filter:Alpha(opacity=38);
	Z-INDEX: 1;
}
.flashNews H3 {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 415px;
	LINE-HEIGHT: 35px;
	POSITION: absolute;
	TOP: 240px;
	HEIGHT: 32px
}
.flashNews H3 A {
	FONT-WEIGHT: normal; FONT-SIZE: 20px; COLOR: #ffffff; FONT-FAMILY: "黑体"
}
.flashNews H3 A:hover {
	COLOR: #f20000
}
.flashNews P {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 412px;
	LINE-HEIGHT: 20px;
	POSITION: absolute;
	TOP: 268px;
	HEIGHT: 32px
}
.flashNews P A {
	COLOR: #ffffff
}
.flashNews P A:hover {
	COLOR: #f20000
}
.flashNews .pager {
	float: left;
	width: 18px;
	height: 312px;
	Z-INDEX: 1;
	background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
	POSITION: absolute;
	padding: 1px 0 0 1px;
	left: 1px;
	RIGHT: 430px;
	BOTTOM: 1px;
	_bottom: 1px;
	/*_background: #ece9d8;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop');
	/*overflow: hidden;*/
}
.flashNews .pager A {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
	FLOAT: left; 
	MARGIN-LEFT: 1px; 
	WIDTH: 15px; 
	HEIGHT: 42px;
	padding-top: 16px;
	COLOR: #000000; 
	FONT-FAMILY: Tahoma; 
	TEXT-ALIGN: center
}
.flashNews .pager A:hover {
	COLOR: #ffffff
}
.flashNews .pager A.currA {
	COLOR: #ffffff
}
#SwitchPicContainer {
	float: right;
	padding-top: 3px;
}
.flashNews .pager {
background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
}
.flashNews .pager A {
FONT-WEIGHT: bold; 
FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
FLOAT: left; 
MARGIN-LEFT: 1px; 
WIDTH: 15px; 
HEIGHT: 42px;
padding-top: 16px;
COLOR: #000000; 
FONT-FAMILY: Tahoma; 
TEXT-ALIGN: center
}
.flashNews .pager A:hover {
COLOR: #ffffff
}
.flashNews .pager A.currA {
COLOR: #ffffff
}
#wraper #copy {
	margin:0 auto;
	margin-top:10px;
	width:946px;
	height:129px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/copy_bg.gif) scroll repeat-x;
	border:1px solid #2688DD;
	border-bottom:0;
}
#wraper #copy p {
	text-align:center;
	line-height:30px;
	padding-top:35px;
	font-size:12px;
	font-weight:normal;
	color:#2F3436;
}
#wraper #copy p a {
	font-size:12px;
	color:#2F3436;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wraper">
      <div class="top">
        <div class="top_img"></div>
        <div class="nav">
        <div class="navlist">
               <ul>
<li class="navlist_big"><a href="/">首页</a></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">我们的概况</a>
            <ul>
            	<li><a href="#">我们的简介</a></li>
                <li><a href="#">荣誉榜</a></li>
                <li><a href="#">领导介绍</a></li>
                <li><a href="#">组织机构</a></li>
                <li><a href="#">通讯方式</a></li>
            </ul></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">展区简介</a>
            <ul>
            	<li><a href="#">天文地理</a></li>
                <li><a href="#">万物之灵</a></li>
                <li><a href="#">未来探索</a></li>
                <li><a href="#">黔贵大地</a></li>
                <li><a href="#">少儿科技园</a></li>
            </ul>
</li>
                 <li><a href="#">4D影院</a></li>
                 <li><a href="#">信息中心</a></li>
                 <li><a href="#">科学乐园</a></li>
                 <li class="navlist_big"><a href="#">学术·培训</a></li>
                 <li><a href="#">游客服务</a></li>
               </ul>
        </div>
           <div class="navdate"><span></span></div>  
      </div>
        <div class="gonggao"></div>
        <div class="clear"></div>
      </div>
<div id="main">
       <div id="maina">
       	<div class="flash">
         
        </div>
            <div class="clear"></div>
      </div>
        
        
        <div id="mainb">
        	<div class="mainb_1">
<div id="pic">
  <div class=flashNews>
    <div class=pager id=FlashSwitchPageNav></div>
    <div class=box>
    <div id=SwitchPicContainer></div>
    <h3 id=SwitchTitle_title></h3>
    <p id=SwitchTitle_stitle></p>
    <div class=bg></div>
    </div>
  </div>
</div>
            </div>
            
            
            
          
            <div class="clear"></div>
        </div>
        
        
      
</div>
<div id="copy">
       	<p>Copyright &copy; 2008-2010, Gzkjg.NET, All Rights Reserved<br />
贵州我们的版权所有    <a href="http://www.miibeian.gov.cn/" target="_blank">黔ICP证090888号</a><br />
        建议使用1024*768的分辨率   IE6.0以上版本的浏览器 </p>       </div>
        
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

原文地址：css z-index----Y7L8‘Blog

[[i] 本帖最后由 y7l8 于 2009-6-29 15:16 编辑 ]

136com · 发表于 2009-6-29 15:17:18

非常感谢楼上的
现在知道原因了!

zeratul1 · 发表于 2009-6-29 16:38:44

哈哈，果然是我理解错了呀。我还纳闷儿呢。
怪我观察不仔细。实在不好意思呀。

下午回来再一看才明白你的意思呀。
就是这样。

<!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>
<link rel="stylesheet" type="text/css" href="style/master.css" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>贵州我们的_贵州我们的</title>
<style type=text/css>
body {
	margin:0 auto;
}
* {
	margin:0;
	padding:0;
}
div,ul,li,dl,dt,dd { 
	font-size:14px; 
	font-family:"宋体",arial;
	list-style-type:none;
}
#wrap {
	width:1002px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/bg.gif) scroll repeat-y  0px 0px;
	height:100%;
	margin:0 auto;	
}
#wrap #wraper {
	width:950px;
	margin:0 0 0 25px;
}
/* 导航 */
#wraper .top .top_img {
	height:139px;
	width:950px;
}
#wraper .top .nav {
                position:relative;
                z-index:1000;
	height:37px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_bg.gif) scroll repeat-y  0px 0px;
}
#wraper .top .nav .navlist {
	float:left;
}
#wraper .top .nav .navlist ul {
	padding-top:13px;
}
#wraper .top .nav .navlist ul li {
	float:left;
	width:90px;
	text-align:center;
	background:transparent url(http://php.vle8.com/kjg/templates/images/nav_line.gif) scroll no-repeat right 0px;
	position:relative;
	padding: 0;
}
#wraper .top .nav .navlist ul .navlist_big {
	width:80px;
}
#wraper .top .nav a {
	width: 90px;
	text-align:center;
	overflow:hidden;
	padding: 0;
}
#wraper .top .nav .navlist ul li a:link { 
	font-size:14px;
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:visited { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:none; 
	color:#fff;
}
#wraper .top .nav .navlist ul li a:active { 
	font-size:14px; 
	font-weight:bold;
	text-decoration:underline; 
	color:#2E0175;
}
#wraper .top .nav .navlist ul li a:hover { 
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
	color:#2E0175;
}
#wraper .top .nav .navdate {
	float:right;
	padding:13px 10px 0 0;
}
#wraper .top .nav .navdate span {
	font-size:12px;
}
#wraper .top .nav .navlist ul li ul {
	 width: 90px;
	 line-height: 27px;
	 list-style-type: none;
	 text-align:left;
	 position: absolute;
	display:none;
	z-index: 9999;
	top: 12px;
	left: 0px;
}
#wraper .top .nav .navlist ul li ul li{
	 float: left;
	 width: 90px;
	 background: #03b2e3;
	border: #dbdbdb 1px solid;
	border-top: 0;
}
#wraper .top .nav .navlist ul li ul a {
	 display: block;
	 width: 90px;
	 text-align:center;
}
#wraper .top .nav .navlist ul li ul a:link  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:visited  {
	 color:#333;
	 text-decoration:none;
}
#wraper .top .nav .navlist ul li ul a:hover  {
	 color:#F3F3F3;
	 text-decoration:none;
	 font-weight:bold;
	 background:#991F1E;
}
#wraper .top .nav .navlist ul li:hover ul {
	 left:0;
	 display:block;
	 top:11px;
	z-index: 9;
}
/* 公告和搜索 */
#wraper .top .gonggao {
	margin-top:2px;
	height:27px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/gonggao_nav.gif) scroll repeat-x 0 0;
}
#main {
	height:714px;
	}
/* 左边 */
#maina {
	margin:10px 0 0 0px;
	float:left;
	width:241px;
}
#maina .flash {
	margin-left:1px;
	height:212px;
	background:#FAF4F0;
	border:1px solid #B6C8CA;
}
/* 中 */
#mainb {
	width:453px;
	height:704px;
	float:left;
	margin:10px 0 0 7px;
}
#mainb .mainb_1 {
	width:451px;
	height:314px;
	border:1px solid #DBDBDB;
}
.flashNews {
	padding-right: 5px;
	OVERFLOW: hidden;
	WIDTH: 444px;
	POSITION: relative;
	HEIGHT: 314px;
	Z-INDEX: 1;
	border: #dbdbdb 1px solid;
}
.flashNews IMG {
	DISPLAY: block; OVERFLOW: hidden; WIDTH: 420px; HEIGHT: 306px
}
.flashNews .bg {
	BACKGROUND: #000000;
	LEFT: 24px;
	WIDTH: 420px;
	BOTTOM: 3px;
	POSITION: absolute;
	HEIGHT: 73px;
	_bottom: 3px;
	opacity:0.38;
	filter:Alpha(opacity=38);
	Z-INDEX: 1;
}
.flashNews H3 {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 415px;
	LINE-HEIGHT: 35px;
	POSITION: absolute;
	TOP: 240px;
	HEIGHT: 32px
}
.flashNews H3 A {
	FONT-WEIGHT: normal; FONT-SIZE: 20px; COLOR: #ffffff; FONT-FAMILY: "黑体"
}
.flashNews H3 A:hover {
	COLOR: #f20000
}
.flashNews P {
	Z-INDEX: 1;
	LEFT: 35px;
	WIDTH: 412px;
	LINE-HEIGHT: 20px;
	POSITION: absolute;
	TOP: 268px;
	HEIGHT: 32px
}
.flashNews P A {
	COLOR: #ffffff
}
.flashNews P A:hover {
	COLOR: #f20000
}
.flashNews .pager {
	float: left;
	width: 18px;
	height: 312px;
	Z-INDEX: 1;
	background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
	POSITION: absolute;
	padding: 1px 0 0 1px;
	left: 1px;
	RIGHT: 430px;
	BOTTOM: 1px;
	_bottom: 1px;
	/*_background: #ece9d8;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/flashPage_bg.png',sizingMethod='crop');
	/*overflow: hidden;*/
}
.flashNews .pager A {
	FONT-WEIGHT: bold; 
	FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
	FLOAT: left; 
	MARGIN-LEFT: 1px; 
	WIDTH: 15px; 
	HEIGHT: 42px;
	padding-top: 16px;
	COLOR: #000000; 
	FONT-FAMILY: Tahoma; 
	TEXT-ALIGN: center
}
.flashNews .pager A:hover {
	COLOR: #ffffff
}
.flashNews .pager A.currA {
	COLOR: #ffffff
}
#SwitchPicContainer {
	float: right;
	padding-top: 3px;
}
.flashNews .pager {
background: #ece9d8 url(images/tab.gif) no-repeat 0px 0px;
}
.flashNews .pager A {
FONT-WEIGHT: bold; 
FONT-SIZE: 10px; /*BACKGROUND: #000000;*/ 
FLOAT: left; 
MARGIN-LEFT: 1px; 
WIDTH: 15px; 
HEIGHT: 42px;
padding-top: 16px;
COLOR: #000000; 
FONT-FAMILY: Tahoma; 
TEXT-ALIGN: center
}
.flashNews .pager A:hover {
COLOR: #ffffff
}
.flashNews .pager A.currA {
COLOR: #ffffff
}
#wraper #copy {
	margin:0 auto;
	margin-top:10px;
	width:946px;
	height:129px;
	background:transparent url(http://php.vle8.com/kjg/templates/images/copy_bg.gif) scroll repeat-x;
	border:1px solid #2688DD;
	border-bottom:0;
}
#wraper #copy p {
	text-align:center;
	line-height:30px;
	padding-top:35px;
	font-size:12px;
	font-weight:normal;
	color:#2F3436;
}
#wraper #copy p a {
	font-size:12px;
	color:#2F3436;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wraper">
      <div class="top">
        <div class="top_img"></div>
        <div class="nav">
        <div class="navlist">
               <ul>
<li class="navlist_big"><a href="/">首页</a></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">我们的概况</a>
            <ul>
            	<li><a href="#">我们的简介</a></li>
                <li><a href="#">荣誉榜</a></li>
                <li><a href="#">领导介绍</a></li>
                <li><a href="#">组织机构</a></li>
                <li><a href="#">通讯方式</a></li>
            </ul></li>
<li onMouseOver="menuShow(this)" onMouseOut="menuClose(this)">
<a href="#">展区简介</a>
            <ul>
            	<li><a href="#">天文地理</a></li>
                <li><a href="#">万物之灵</a></li>
                <li><a href="#">未来探索</a></li>
                <li><a href="#">黔贵大地</a></li>
                <li><a href="#">少儿科技园</a></li>
            </ul>
</li>
                 <li><a href="#">4D影院</a></li>
                 <li><a href="#">信息中心</a></li>
                 <li><a href="#">科学乐园</a></li>
                 <li class="navlist_big"><a href="#">学术·培训</a></li>
                 <li><a href="#">游客服务</a></li>
               </ul>
        </div>
           <div class="navdate"><span></span></div>  
      </div>
        <div class="gonggao"></div>
        <div class="clear"></div>
      </div>
<div id="main">
       <div id="maina">
       	<div class="flash">
         
        </div>
            <div class="clear"></div>
      </div>
        
        
        <div id="mainb">
        	<div class="mainb_1">
<div id="pic">
  <div class=flashNews>
    <div class=pager id=FlashSwitchPageNav></div>
    <div class=box>
    <div id=SwitchPicContainer></div>
    <h3 id=SwitchTitle_title></h3>
    <p id=SwitchTitle_stitle></p>
    <div class=bg></div>
    </div>
  </div>
</div>
            </div>
            
            
            
          
            <div class="clear"></div>
        </div>
        
        
      
</div>
<div id="copy">
       	<p>Copyright &copy; 2008-2010, Gzkjg.NET, All Rights Reserved<br />
贵州我们的版权所有    <a href="http://www.miibeian.gov.cn/" target="_blank">黔ICP证090888号</a><br />
        建议使用1024*768的分辨率   IE6.0以上版本的浏览器 </p>       </div>
        
    </div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

和前面的同学有点不一样。

/* 导航 */
#wraper .top .top_img {
height:139px;
width:950px;
}
#wraper .top .nav {
position:relative;
z-index:1000;
height:37px;
background:transparent url(http://php.vle8.com/kjg/templates/images/nav_bg.gif) scroll repeat-y 0px 0px;
}

复制代码

论坛上的这篇文章推荐读一读，相当全面和深刻。
层叠加的五条法则

没帮上忙实在不好意思呀。惭愧了。

136com · 发表于 2009-6-29 17:28:00

非常感谢!!

帐号		自动登录	找回密码
密码			注册