這個問題誰來解答一下
<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;/*外發光*/
?
?
}
?.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="#">圖書、音像、數字商品</a><span></span>
? ? ? ?<div class="submenu">
? ? ? ? ? <div class="leftdiv">
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? ? ?左側二級分類<br/>?
? ? ? ? ? ? ?左側二級分類<br/>
? ? ? ? ? </div>
? ? ? ? ? <div class="rightdiv">
? ? ? ? ? ? 右側推薦品牌
? ? ? ? ? </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>
? </ul>
?</div>?
</body>
</html>
2016-08-25
小哥你的問題能不能寫在代碼外面，我真是找了半天
第一個問題?.menu ul li里面的z-index樣式設置的是它的層級，你可以把你頁面的內容想象成存在于三圍空間中，我的margin和pading不論是上下左右都是在xy平面移動，比如pading-top=20px,就可以想象成這個元素的內邊距向y軸正方向移動了20像素，z-index就是z軸，我的Li標簽z-index的大小是2，那么我后面的span標簽z-index值是20，就遠遠高于li標簽，所以在鼠標移到上面顯示的時候，它的內容才能把Li標簽部分遮蓋住。
然后第二個問題，position relative是相對定位，它所參照的對象是它上一級的元素，這里span上一級的元素就是li標簽，樣式目的是為了讓span里面的內容遮蓋一部分Li標簽，當然就是relative。如果你設置成absolute絕對定位那就等同于相對瀏覽器定位了。你可以試試改成absoluter然后再在div class=menu這個標簽里面設置樣式，讓整個標簽全變成一個紅色，然后span標簽里面是白色，那么你就能看到當你鼠標移過去的時候,span標簽的內容不止是在li標簽上面，更是在div標簽上面，因為這個時候所有標簽的定位都是根據這個span來的
2016-08-26
額(⊙o⊙)…，非常感謝，不過我還是有問題，，第一個問題里：z-index只有在有position定位的時候才奏效，而那里邊沒有，第二個問題：相對定位不是相對于他自身來定位的嗎，為什么你說他參照的對象是上一級元素？
2016-08-25
z-index, ? z軸