关于堆叠顺序，z-inde，这个知识点需要学习吗，怎么理解，看完辅件资料还是不太懂。，看完
来源：2-5 position-relative
qq_慕移动3101913
2019-07-16 16:28:02
比如老师讲的案例，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.block{
width:80px;
height:80px;
line-height:80px;
text-align:center;
/*border:1px solid red;*/
}
.a{
border:3px solid red;/*边框*/
float:left;/*向左浮动*/
position:relative; /*相对定位*/
top:0;
left:0;
z-index: 9;/*使A覆盖在B上面*/
}
.b{
position:relative;/*相对定位*/
top:0px;
left:-86px; /*使B覆盖在A上面*/
border:3px solid blue; /*边框*/
float:left; /*向左浮动*/
z-index: 1;/*使A覆盖在B上面*/
}
</style>
</head>
<body>
<div class="block a">A</div>
<div class="block b">B</div>
<!-- <div class="block">C</div> -->
</body>
</html>
为什么设置 z-index: 9; 和 z-index: 1;
1回答
-
同学你好，z-index可以理解为是控制元素的显示层级。首先我们需要理解页面中元素的显示， 是按着HTML结构中从上到下，从左到右的规则排列的，默认的写在后面的元素层级比前面的元素高。然后我们在来结合下面的步骤理解
通过定位或浮动将A和B元素堆叠显示在一起， B会覆盖A元素。
效果图：此时B是覆盖在A上面的， 也说明默认的写在后面的元素显示层级高
通过z-index可以改变元素的显示层级。 示例： 如果我们想要A显示在B元素上， 那么就可以通过给A设置z-index值，提升它的显示层级
效果图：此时A显示在B上面了，这也就体现了z-index的作用。可以提升元素的显示层级
综上， 我们可以简单的理解为， z-index的作用可以让元素显示在最上面。并且z-index的值越大， 显示层级越高。
这个知识点是需要学习的， 同学目前不用纠结到底是怎么一回事， 先简单了解他的作用，然后动手多做练习，结合代码实现的效果会更容易理解哦。
如果帮助到了你， 欢迎采纳！
祝学习愉快~~
1
相似问题