记一次z-index问题解决

最近前端的一个项目进行代码重构，主要是页面搜索框样式重构：将原来进入页面默认展示的搜索条件隐藏起来，第一点击搜索的时候弹出搜索条件框，然后可以进行条件搜索。这其中搜索条件框因为要隐藏展示，所以外层包了一个新的div。在我写的页面中有一个fullcalendar日历插件的展示，因为有事件标记（events），生成的dom中具有z-index属性以显示层次结构，该页面的搜索框中有一个机构树展示插件，点击input进行树的展示，树因为要展示在其他之上使用了z-index: 900，此为背景。问题来了，更换了搜索框之后，点击树展示后层次老是位于日历插件之下，文字几乎被覆盖了，开始以为只是简单的z-index改大就可以了，排查了半天才发现问题，记录下来以备后用。

position问题

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

这是stackoverflow上的一个回答，意思就是z-index只对设置有position属性（不能是static）的dom元素有效，我的树position: absolute明显满足这个条件。

float问题

对于float这种问题我的明显不存在，树组件只有一个div套了一个ul，是上下结构的，直接排出。

真正问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14

div { 
    border: 2px solid #000; 
    width: 100px; 
    height: 30px; 
    margin: 10px; 
    position: relative; 
    background-color: #FFF; 
}
#el3 { 
    background-color: #F0F; 
    width: 100px; 
    height: 60px; 
    top: -50px; 
}

1
2
3
4

<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
  <div id="el3" style="z-index: 8"></div>
</div>

看上面这段代码，el1和el2是上下关系，el2包含el3，el3大于el2，顶出去了，根据z-index的设置，从上到下顺序是el3—el1—el2，但真实情况是el1—el3—el2，无论el3的z-index设置多大，它都永远位于el1下，这是因为el3的父元素el2的z-index是小于el1的，无论怎么设置，el3都会在el1之下。

前面说了，我们的搜索框要进行隐藏和展示操作，外层包了一层新的div，去代码里查看这个新div的样式，发现有个z-index：1，而页面上的日历插件中的部分dom的属性z-index都是4或者5，这下就找到问题所在了，直接把新div的样式z-index修改为10就好了。

样式是别人写的，不了解为什么要加z-index这个属性，搜索框的隐藏和展示并不涉及元素的碰撞或者叠加，去掉这个属性展示也是ok的。总之找到了问题所在，算是给自己增加了一点技能。