前言
前端的小伙伴们应该都有接触过css中关于层级的概念，即在一个页面中，两个或多个元素重叠时，哪个元素应当处于更高层。但是其中的原理其实并没有那么简单，如果不了解其中的原理，可能会像我一样出现设计上的错误。
如下图：
这个听起来不是很简单的概念吗，为什么我要聊这个，这是因为我在开发我的绘图系统中，发现了这么一个现象。我期望实现如下图（来自processOn），选中组件以后，选中组件的层级能够高于2组件，1组件本体居于原来的位置不变。
但是我无论怎么去调整我选中框的层级，都无法实现让它单独层级置顶的功能。
打开开发者工具，剖析了我们html结构的不同之处。我发现，processOn中，选中框和图形并不是父子关系，而是并列关系。
选择框：
元素：
而我的选中框和内部组件采用的是父子关系。这就是我因为不了解css的层级设计，从而导致了我的设计从根本上出现了错误。
接下来，我讲讲解为什么会出现这样的现象。
控制层级的两个例子
用层级控制并列元素的显示
在css中，我们可以通过z-index这个属性控制层级。当然了，我们要使之产生作用的前提就是，position不是static。
z-index的值一般为数字，数字越大，层级越高。下面这个例子当中，我们为几个并列的元素设置不同的层级值，进行比较。
代码：
xml
<body>
<style>
.box{
display: inline-block;
width: 100px;
height: 100px;
position: absolute
}
.zIndex1{
left: 30px;
top: 30px;
background: red;
}
.zIndex2{
z-index: 0;
left: 50px;
top: 50px;
background: blue;
}
.zIndex3{
z-index: 99;
left: 70px;
top: 70px;
background: green;
}
.zIndex4{
z-index: -1;
left: 10px;
top: 10px;
background: yellow;
}
</style>
<div class="box zIndex1">
box1-无
</div>
<div class="box zIndex2">
box2-0
</div>
<div class="box zIndex4">
box4-(-1)
</div>
<div class="box zIndex3">
box3-99
</div>
</body>效果：
从上面的例子我们可以知道，z-index的数值排序中负数<无<0<正数。
父子关系下，层级的效果
我们将box2的层级设置为99，放在父容器box（层级为-1）中。另外还有一个和box1并列的元素box3（层级为0）。
代码如下：
xml
<body>
<style>
.box{
display: inline-block;
width: 100px;
height: 100px;
position: absolute
}
.zIndex1{
width: 200px;
height: 200px;
z-index: -1;
background: blue;
}
.zIndex2{
left: 50px;
top: 50px;
z-index: 99;
background: green;
}
.zIndex3{
left: 100px;
top: 100px;
z-index: 10;
background: yellow;
}
</style>
<div class="box zIndex3">
box3-0
</div>
<div class="box zIndex1">
box1-(-1)
<div class="box zIndex2">
box2-99
</div>
</div>
</body>效果：
一般情况下，我们认为按照层级数值排序，从上到下应当是box2(99) box3(0) box1(-1)。
然而，实际情况是box3 box2 box1。这也是前面我产生设计失误的关键所在。
css中z-index的设计剖析
css中在z轴上的设计，我们可以将元素简化为一个个盒子，层级的比较只在并列的两个盒子之间进行。如果父级盒子的层级较低，那么其子元素层级就算设置成999也不会比高于其父级的盒子的层级高。
如下图：
总结
从理解了层级原理再到反思之前写过的项目，突然也理解到了，一般弹窗组件的元素被放在根节点下的原因，processOn将各个元素都放在同一层的原因....
经过这次我又一次意识到，程序员不能光写代码，也需要时间去沉淀自己，去理解其中的运作原理，才能够做出更好的设计，从而达到事半功倍的效果。
希望我的文章能对各位读者有所帮助。