這個(gè)問(wèn)題誰(shuí)來(lái)解答一下
<style type="text/css">
?*{
? ? margin:0;
padding:0;
font-size:18px;
}
?.menu{
width:220px;
border:2px solid red;
}
?.title{
height:40px;
line-height:40px;
text-align:left;
font-size:24px;
font-weight:bold;
background:red;
color:#fff;
padding-left:10px;
}
?.menu ul li{
list-style:none;
height:30px;
line-height:30px;
font-size:24px;
text-align:left;
padding-left:8px;
z-index:3;/*???有用嗎*/
background-image:url(%E5%9B%BE%E7%89%87/%E7%AE%AD%E5%A4%B4.jpg);
background-repeat:no-repeat;
background-position:right;
?
}
?ul li a{
text-decoration:none;
color:#313131;
?}
?.menu ul li:hover{
background:none;
border:1px solid #DDD;
border-right:0;
box-shadow:0 0 8px #DDD;/*外發(fā)光*/
?
?
}
?.menu ul li a:hover{
text-decoration:underline;
color:#e4393c;
font-weight:bold;
}
? ?
?.submenu{
display:none;
width:715px;
position:absolute;
left:220px;
top:40px;
border:1px solid #ddd;
z-index:4;
background:#fff;
box-shadow:0 0 8px #DDD;
}
?.leftdiv{
float:left;
width:490px;
background:#09F;
margin:5px;
}
?.rightdiv{
float:left;
width:200px;
background:#F96;
margin:5px;
}
? .menu ul li:hover .submenu{
?display:block;
?}
?.menu ul li:hover span{
background:#fff;
display:inline-block;
width:20px;
height:30px;
z-index:20;/*z-index屬性只能在定位元素上奏效*/
position:relative;/*為什么不能用absolute?????*/
float:right;
} ? ?
?
</style>
</head>
<body>
? <div class="menu">
? <div class="title">全部商品分類</div>
? <ul>
? ? <li><a href="#">圖書、音像、數(shù)字商品</a><span></span>
? ? ? ?<div class="submenu">
? ? ? ? ? <div class="leftdiv">
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>?
? ? ? ? ? ? ?左側(cè)二級(jí)分類<br/>
? ? ? ? ? </div>
? ? ? ? ? <div class="rightdiv">
? ? ? ? ? ? 右側(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="#">服飾、珠寶首飾</a></li>
? ? <li><a href="#">化妝</a></li>
? ? <li><a href="#">箱包、手表、奢飾品</a></li>
? ? <li><a href="#">運(yùn)動(dòng)戶外</a></li>
? ? <li><a href="#">母嬰、玩具</a></li>
? </ul>
?</div>?
</body>
</html>
2016-08-25
小哥你的問(wèn)題能不能寫在代碼外面，我真是找了半天
第一個(gè)問(wèn)題?.menu ul li里面的z-index樣式設(shè)置的是它的層級(jí)，你可以把你頁(yè)面的內(nèi)容想象成存在于三圍空間中，我的margin和pading不論是上下左右都是在xy平面移動(dòng)，比如pading-top=20px,就可以想象成這個(gè)元素的內(nèi)邊距向y軸正方向移動(dòng)了20像素，z-index就是z軸，我的Li標(biāo)簽z-index的大小是2，那么我后面的span標(biāo)簽z-index值是20，就遠(yuǎn)遠(yuǎn)高于li標(biāo)簽，所以在鼠標(biāo)移到上面顯示的時(shí)候，它的內(nèi)容才能把Li標(biāo)簽部分遮蓋住。
然后第二個(gè)問(wèn)題，position relative是相對(duì)定位，它所參照的對(duì)象是它上一級(jí)的元素，這里span上一級(jí)的元素就是li標(biāo)簽，樣式目的是為了讓span里面的內(nèi)容遮蓋一部分Li標(biāo)簽，當(dāng)然就是relative。如果你設(shè)置成absolute絕對(duì)定位那就等同于相對(duì)瀏覽器定位了。你可以試試改成absoluter然后再在div class=menu這個(gè)標(biāo)簽里面設(shè)置樣式，讓整個(gè)標(biāo)簽全變成一個(gè)紅色，然后span標(biāo)簽里面是白色，那么你就能看到當(dāng)你鼠標(biāo)移過(guò)去的時(shí)候,span標(biāo)簽的內(nèi)容不止是在li標(biāo)簽上面，更是在div標(biāo)簽上面，因?yàn)檫@個(gè)時(shí)候所有標(biāo)簽的定位都是根據(jù)這個(gè)span來(lái)的
2016-08-26
額(⊙o⊙)…，非常感謝，不過(guò)我還是有問(wèn)題，，第一個(gè)問(wèn)題里：z-index只有在有position定位的時(shí)候才奏效，而那里邊沒有，第二個(gè)問(wèn)題：相對(duì)定位不是相對(duì)于他自身來(lái)定位的嗎，為什么你說(shuō)他參照的對(duì)象是上一級(jí)元素？
2016-08-25
z-index, ? z軸