这个问题谁来解答一下
小菜鸟飞
2016-08-25 18:11
<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>
3回答
-
- 慕仰6432972
- 2016-08-25 22:36:12
小哥你的问题能不能写在代码外面，我真是找了半天
第一个问题 .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 12:01:41
额(⊙o⊙)…，非常感谢，不过我还是有问题，，第一个问题里：z-index只有在有position定位的时候才奏效，而那里边没有，第二个问题：相对定位不是相对于他自身来定位的吗，为什么你说他参照的对象是上一级元素？
-
- iPour
- 2016-08-25 22:34:20
z-index, z轴
商城分类导航效果
63734 学习 · 312 问题
相似问题
回答 1
回答 3