html z-index怎么用,css里z-index

　　最近在学习层叠上下文的过程中，有一个关于z-index为0和auto的区别的问题，于是去百度查资料。发现了一些问题，结合自己的实践(实验？)整理了这张纸条。

勘误

　　我查资料的时候发现一个说法，z索引为0会创建一个新的级联上下文，0会在auto之上。后一句是错的。z-index: 0和z-index没有设置，也就是z-index: auto在同一个级别中没有高低之分。文档流中稍后出现的内容将覆盖最先出现的内容。

设置z-index: 0或z-index: auto，文档流中后出现的会覆盖先出现的。

　　做一些小实验。

　　！键入htmlhtmlhead titlez-index为0或auto/titlestyle.red，蓝色{宽度：200px高度：200px} .红色{位置：绝对；z指数：0；top:100px；左：100px背景：# FF0000} .蓝色{位置：绝对；z-index:自动；top:40px；左：40px背景：# 0000FF}/style/head body div class= red index-0/div div class= blue index-auto/div/body/html这段代码的结果是：

　　可以看到蓝色元素覆盖了红色元素，文档中交换红色和蓝色元素块的顺序如下

　　div class= blue index-auto/div div class= red index-0/div可以得到

　　此时，红色元素覆盖蓝色元素。可以得出结论，z-index 0或auto的值对级联上下文中元素的顺序没有影响。

　　除此之外，我还在MDN文档里看到了这句话：

　　如果未指定z-index，所有元素都将在默认图层(图层0)中渲染。

　　也就是auto和0是同一层。然后在上述代码的蓝色块之后添加一个绿色块。

　　Class= green 不设置z-index/div . green { position:absolute；顶配：160px左：160px背景：黄绿色；}这时页面看起来是这样的。

　　绿色没有z索引值集。一般浏览器位置不是静态的，没有设置z-index时，z-index为auto，IE6/7下z-index为0。

　　绿色作为最后一个元素，涵盖了蓝色和红色两个元素。

z-index: 0创建了层叠上下文

　　现在让我们验证红色元素是否具有级联上下文，因为z-index:0。向红色元素添加一个测试元素。

　　div class=test/div。测试{宽度：140px高度：140px位置：绝对；右：0pxtop:0px；背景：灰色；z指数：10；}此时页面看起来是这样的

　　灰色测试块被蓝色和绿色测试块覆盖。

　　显然，即使测试元素的z索引为10，它也不能显示在级联上下文的顶部。因为test属于其父元素red创建的级联上下文。当元素生成级联上下文时，其子级级联上下文的z索引值仅在父级中有意义。所有灰色块的Z-index只对红色块有效。

z-index: auto不创建层叠上下文

　　现在将这个测试元素放在蓝色块中，试一试？(蓝色元素的z索引值是auto)

　　可以看到灰色元素显示在所有元素的顶部，z-index值生效！此时，测试元素属于根元素创建的级联上下文(在级联上下文的层次结构中，没有级联上下文的元素与其父元素处于级联上下文中。蓝色块不创建级联上下文，它是与其父元素(即根元素)相同的级联上下文。红色元素也属于根元素创建的级联上下文，但是红色元素的z-index是0，0小于10，所以灰色块在上面。

总结

　　未设置z索引值时，默认值为auto。默认级别为0级。Z-index: 0和未定义的Z-index，即z-index: auto，在同一级别。文档流中稍后出现的内容将覆盖最先出现的内容。Z-index: 0创建级联上下文z-index: auto不创建级联上下文。关于css中z-index: 0和z-index: auto的区别，本文到此为止。有关z-index: 0和z-index: auto之间差异的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。