代码中的定位以及z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
padding: 0;
font-size: 10pt;
}
.topmenu{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: white;
background: #E4393C;
padding-left: 10px;
}
.topmenu li{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style: none;
text-align: left;
padding-left: 8px;
z-index: 3; /*促使二级菜单与一级菜单有个层级的关系*/
background: url(images/1.png) no-repeat right #f8f8f8;
/*background: color image repeat background-position/background-size; 复合写法*/
}
.topmenu li:hover{
background: none;
border: 1px solid #ddd;
border-right: 0;
box-shadow: 0 0 8px #DDDDDD;
-moz-box-shadow: 0 0 8px #DDDDDD;
-webkit-box-shadow: 0 0 8px #DDDDDD;
}
.topmenu li a{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover{
text-decoration: underline;
color: #e4393c;
font-weight: bold;
}
.submenu{
display: block;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDDDDD;
z-index: 4;
background: #FFFFFF;
box-shadow: 0 0 8px #DDDDDD;
-moz-box-shadow: 0 0 8px #DDDDDD;
-webkit-box-shadow: 0 0 8px #DDDDDD;
}
.left{
background: gray;
float: left;
width: 490px;
margin: 5px;
}
.right{
background: blue;
float: left;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">全部商品分类</div>
<li>
<a href="#">图书、音响、数字商品</a>
<div class="submenu">
<div class="left">
左侧二级分类<br />
左侧二级分类<br />
左侧二级分类<br />
左侧二级分类<br />
左侧二级分类<br />
</div>
<div class="right">
右侧推荐品牌
</div>
</div>
</li>
<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>
<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>
<li><a href="#">食品饮料、酒类、生鲜</a></li>
<li><a href="#">营养保健</a></li>
<li><a href="#">彩票、旅行、充值、票务</a></li>
</ul>
</body>
</html>
在
代码中，.topmenu li中有个z-index:3;这个属性有用吗？不是说z-index只对定位元素管用吗？其次在.submenu中又来了一个z-index:4;还有一个绝对定位，那么其中top left的值是相对谁来进行定位的，li还是body？
