本文主要是介绍z-index的从父原则，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
写在前面
关于z-index的从父原则
1.引发问题
今天在写一个移动端页面的时候，遇到了一个问题当我在给一个设置了position:fixed以及z-index属性以后，不管我怎么更改z-index属性的大小，依然不能使得它起作用，探究其原因后，罪魁祸首是z-index的从父原则
2.z-index的定义
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
3.从父原则
看一段代码
<div class="a"> <div class="b"></div>
</div>
<div class="c"></div>
但是当设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给b设置了position:fixed;属性后，会触发创建一个新的层叠上下文，它的父层叠上下文变成了a，所以b只能在a的内部进行层叠比较。这也就是“从父原则”。简单来说就是本身是大家都在一个平台上比，即a，b，c一起比，但是当设置了fixed以后，b就只能和a的孩子来比，它不能再和c进行比较，除非给a也加上一个z-index属性
4.总结
1.z-index只有在设置了position为relative,absolute,fixed时才会有效。
2.z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。
这篇关于z-index的从父原则的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
