                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導(dǎo)航效果

代碼中的定位以及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;? /*促使二級菜單與一級菜單有個(gè)層級的關(guān)系*/
?? ??? ??? ??? ?background: url(images/1.png) no-repeat right #f8f8f8;
?? ??? ??? ??? ?/*background: color image repeat background-position/background-size;? 復(fù)合寫法*/
?? ??? ??? ?}
?? ??? ??? ?.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="#">圖書、音響、數(shù)字商品</a>
?? ??? ??? ??? ?<div class="submenu">
?? ??? ??? ??? ??? ?<div class="left">
?? ??? ??? ??? ??? ??? ?左側(cè)二級分類<br />
?? ??? ??? ??? ??? ??? ?左側(cè)二級分類<br />
?? ??? ??? ??? ??? ??? ?左側(cè)二級分類<br />
?? ??? ??? ??? ??? ??? ?左側(cè)二級分類<br />
?? ??? ??? ??? ??? ??? ?左側(cè)二級分類<br />
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="right">
?? ??? ??? ??? ??? ??? ?右側(cè)推薦品牌
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</li>
?? ??? ??? ?<li><a href="#">家用電器</a></li>
?? ??? ??? ?<li><a href="#">手機(jī)、數(shù)碼</a></li>
?? ??? ??? ?<li><a href="#">電腦、辦公</a></li>
?? ??? ??? ?<li><a href="#">家具、家居、家裝、廚具</a></li>
?? ??? ??? ?<li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
?? ??? ??? ?<li><a href="#">個(gè)護(hù)化妝</a></li>
?? ??? ??? ?<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
?? ??? ??? ?<li><a href="#">運(yùn)動(dòng)會(huì)外</a></li>
?? ??? ??? ?<li><a href="#">汽車用品</a></li>
?? ??? ??? ?<li><a href="#">母嬰、玩具樂器</a></li>
?? ??? ??? ?<li><a href="#">食品飲料、酒類、生鮮</a></li>
?? ??? ??? ?<li><a href="#">營養(yǎng)保健</a></li>
?? ??? ??? ?<li><a href="#">彩票、旅行、充值、票務(wù)</a></li>
?? ??? ?</ul>
?? ?</body>
</html>

在
代碼中，.topmenu li中有個(gè)z-index:3;這個(gè)屬性有用嗎？不是說z-index只對定位元素管用嗎？其次在.submenu中又來了一個(gè)z-index:4;還有一個(gè)絕對定位，那么其中top? left的值是相對誰來進(jìn)行定位的，li還是body？