z-index层级的小小学问

时间 2019-11-09

标签 index 层级小小学问繁體版

原文原文链接

在平常开发中，咱们常常须要用到z-index这个属性来实现一些浮层层叠的交互，z-index的属性值有auto和nubmer数字2种，数值越大，层级越高，看上去很好理解，很好使用。但实际上，咱们在使用中仍会遇到一些让人疑惑的问题。chrome

疑惑：为啥我这个浮层设的z-index比另一个高，却怎么仍是在它的下面啊？浏览器

首先，咱们仍是要明确下几种浏览器是如何对z-index解析的，以及结合浏览器是如何渲染页面的。布局

ie浏览器对于没有设置z-index属性的元素，默认是以z-index为0来渲染的，参与z-index的比较；
ff和chrome对于没有设置z-index属性的元素，默认是以z-index为auto来渲染的，不参与z-index的比较；
浏览器渲染页面是顺序渲染元素的，排除定位和float布局，定位和float布局的元素是在顺序渲染后，再浮动的；
ie下，z-index依赖于同级比较，也就是说，假设A，B是两个同级元素，A有子节点C，B有子节点D，A是B的后面的一个兄弟节点，B中的D经过绝对定位浮到A上，D设z-index为10，A中的C也用了绝对定位。但没设z-index，或者设了比10小的z-index，在ie下结果是C覆盖了D，而chrome和ff则是D盖住了C。

.a{width:200px;height:200px;background:red;position:relative;}
.b{width:200px;height:100px;background:blue;position:relative;}
.c{width:110px;height:100px;background:yellow;position:absolute;top:-100px;left:20px;z-index:1}
.d{width:100px;height:100px;background:green;position:absolute;top:10px;left:10px;z-index:10}开发

<body>
<div class="b"><div class="d">d</div></div>
<div class="a"><div class="c">c</div></div>
</body>it

根本缘由就是chrome和ff他们父节点没有设置z-index，不参与层级pk，c和d就按照自身的z-index大小pk，因此d盖住c；而ie下，父节点没有设置z-index，会以z-index：0参与比较，而a和b同级节点z-index都是0（都没有设置z-index属性），层级同样，则按前后顺序覆盖了，即c盖住d；若是给b设置z-index:1，则结果相反。io

　　5. 经过父节点设置position：relative，能够把父元素的z-index属性做用到子节点上，若是层级很深的话能够这样作。class

经过了解上面几点，咱们应该就清楚了为何层级有时候“不受控制”。容器

另外：在在开发浮层组件，若是bubble，panel等的时候，不要插入到使用的容器元素里，而应该往body中插入，这样就能把元素跑到外层，z-index设置的就很容易参与比较了，而不会被“平白无故”的被覆盖。渲染

我的理解，若是不许确的地方，还望不吝指点！谢谢！float