您的位置：首页 > 其它

选项卡制作问题--折磨了我一整天，记录下来

2016-03-09 17:58 302 查看

看老曹的html+css课程，学习html+css基础，讲到制作选项卡，以京东商城的选项卡为例，效果如下:

看着他做出来很简单，结果自己做花了2个多小时才有个样子，效果是这样的：

内部代码如下

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行高样式</title>
<style type="text/css">
#mt ul li{
float:left;
width:85px;

height:35px;
text-align:center;
line-height:35px;
list-style:none;
position:relative;
z-index:8;
}

#mt ul li a{
text-decoration:none;
display:block;
height:33px;
z-index:9;

}
#mt ul li span{
display:block;
background:gray;
height:18px;

width:1px;
overflow:hidden;
top:10px;
position:absolute;
left:0px;
z-index:8;
}

#mt{
border-bottom:1px solid red;
height:35px;
width:1200px;
}
ul ,li{
margin:0px;
padding:0px;
border:0px;
}
#mt ul{
border:1px solid gray;
height:35px;
border-bottom:none;
margin-left:20px;
margin-right:40px;

}
.select_li a{
display:block;
border:1px solid red;
border-top:3px solid red;
position:absolute;
width:85px;
z-index:9;
top:-1px;
left:-1px;
border-bottom:none;
background:white;
}
</style>
</head>
<body >
<!--  line-height:  字体高度/2 0/2 =0;-->
<div id="mt">
<ul>
<li class="select_li"><a href="#">首页</a><span></span></li>
<li><a href="#">鞋子</a><span></span></li>
<li><a href="#">大衣</a><span></span></li>
<li><a href="#">内衣</a><span></span></li>
<li class="select_li"><a href="#">帽子</a><span></span></li>
<li><a href="#">婴儿</a><span></span></li>
<li><a href="#">妇幼</a><span></span></li>
</ul>
</div>

</body>
</html>

a标签的右边框始终覆盖不了span，这让我头疼，由于不熟悉，我考虑了一万种可能，结果搞了一晚上没结果，第二天继续搞了一晚上还是不行，第二天上班抽时间还在想，

甚至发到群里求助，可是没人回应，结果无意间（其实经过深思熟虑的尝试）我把span标签的left:0px;改成了right:0px;就好了！！！

现在的效果是这样的

总结：

1.z-index只对在同一个容器内的元素有作用，不是同一容器没有用

2.span的left:0px;造成a左边框覆盖的是所在li下的span，而右边框上的a是后面一个lib下的span，所以z-index没用，span依然显示在a右边框上

3.那为啥span改成right:0px;就好了呢,为啥span不覆盖后边lib下的a了呢？原来浏览器默认同一容器的元素先渲染的z-index就低，即后渲染的覆盖先渲染的，因为ul下面的lib元素是左浮动，所以是由左向右渲染的，自然右边的lib的z-index要比左边高。为了验证我的想法，我把lib都改成右浮动（还要调整下才能正常覆盖），结果就是

这时将span改成left:0px,看看效果：

结果证明我的想法是对的！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浮动 z-index

相关文章推荐

新的分享

章节导航