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

本文主要是介绍选项卡制作问题--折磨了我一整天，记录下来，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

看老曹的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都改成右浮动（还要调整下才能正常覆盖），结果就是