导航栏中间直线的定位这块不太理解

/*导航栏中间的直线*/

nav:before{

position: absolute;

top: 20px;

display: block;

width: 100%;

height: 10px;

content: "";

background: #fff;

}

/*a标签内容样式*/

nav>a{

font-size: 20px;

position: relative;

padding: 10px;

text-decoration: none;

color: #255d7e;

border: 2px solid #5395b4;

background: #fff;

}

问题2：为什么要把整体高度设置成100%，不是可以由内容撑开吗？用内容撑开是要怎么做？

据说真的有神 2019-08-02

源自：jQuery入门 3-2 表示层--导航的实现

收起

2回答

卡布琦诺 2019-08-02 19:51:01

每一个定位元素都归属于一个stacking context。根元素形成root stacking context，而其他的stacking context则由定位元素产生（此定位元素的z-index被定义一个非auto的z-index值），定位子元素会以这个local stacking context为参考，用相同的规则来决定层叠顺序。
当stacking context一样的时候，就用z-index的值来决定怎样显示，如果z-index也相同（即stack level相同），则按照档中后来者居上的原则（back-to-front ）的顺序来层叠。
当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定，

也就是说这里没有设置z-index，也就是使用默认的z-index，所以这里是按照档中后来者居上的原则（back-to-front ）的顺序来层叠

希望可以帮到你！

收起回答

卡布琦诺 2019-08-02 16:34:25

1、同学是不理解下列这两段代码的具体意思么？如果不是建议详细描述具体是哪里不懂

/*导航栏中间的直线*/
nav:before{
	position: absolute;
	top: 20px;
	display: block;
	width: 100%;
	height: 10px;
	content: "";
	background: #fff;
}
/*a标签内容样式*/
nav>a{
	font-size: 20px;
	position: relative;
	padding: 10px;
	text-decoration: none;
	color: #255d7e;
	border: 2px solid #5395b4;
	background: #fff;
}

2、同学说把整体高度设置成100%，指的是html,body{height: 100%}吗？这里是为了让背景色全屏显示

如果还有疑问，可以再次提问并详细描述一下哦，老师会竭尽全力帮你去解答

祝学习愉快！

收起回答