没明白视频里设置a的定位为relative是什么意思，直接设置z-index也能实现效果呀
来源：3-2 表示层--导航的实现
weixin_慕斯1009030
2019-09-24 18:19:50
nav{
display: flex;
justify-content: space-between;
/*以上两个属性结合使用让元素在容器中左右均匀分布*/
width:78.125vw;
/*vw:相对单位，1vw等于可视窗口宽度的1%*/
margin: 0 auto 45px;
position: relative;
}
nav::before{
content:'';
width:100%;
height:10px;
background-color: #fff;
position:absolute;
top:10px;
}
nav > a{
text-decoration:none;
display:inline-block;
font-size:15px;
background-color: #fff;
color:#255d7e;
border:1px solid #5395b4;
padding:5px;
z-index: 1;
}
可以讲一下为什么设置a的定位后就能将白色横条下移了吗，还有上面的代码将a的z-index:1,这样有没有问题呢，效果是一样的
2回答
-
同学你好，没有给a元素设置定位，z-index还能起作用，是因为a元素的父级（nav）元素设置为了弹性盒模型。（弹性布局可以结合z-index进行使用）如果同学把nav的display: flex;去掉之后，按照同学的代码z-index就不会生效了哦。
同学可以测试下。如果帮助到了你，欢迎采纳~祝学习愉快~
0 -
好帮手慕言
2019-09-24
同学你好，
1、因为z-index一般情况下都是配合定位使用的。
2、因为a标签在before元素后面，给a标签设置定位之后，a标签的层级比白色条的高，before元素就会被覆盖在a标签下面。
3、能够实现效果就可以哦。
如果帮助到了你，欢迎采纳~祝学习愉快~
0h019-09-25
相似问题