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

最新推荐文章于 2019-12-04 15:12:19 发布

向下生长的花

最新推荐文章于 2019-12-04 15:12:19 发布

阅读量493

点赞数

分类专栏：学习笔记文章标签：浮动 z-index

本文链接：https://blog.csdn.net/u013456765/article/details/50837134

版权

学习笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

看老曹的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,看看效果：

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

向下生长的花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
选项卡制作问题--折磨了我一整天，记录下来

那为啥span改成right:0px;就好了呢,为啥span不覆盖后边lib下的a了呢？原来浏览器默认同一容器的元素先渲染的z-index就低，即后渲染的覆盖先渲染的，因为ul下面的lib元素是左浮动，所以是由左向右渲染的，自然右边的lib的z-index要比左边高。
复制链接

扫一扫