z-index的相关问题

网页其实是三维结构的，除了x、y轴，它还有z轴。z轴的大小由z-index控制，默认情况下，所有元素都是在z-index: 0这一层。

元素根据自己的display类型、长度、内外边距等属性顺序排列在z-index: 0这一层里，这就是文档流。

z轴在元素设置position为absolute或relative后被激活，即设置position会让元素“浮”起来，也就是z-index值会大于0，从而改变了正常情况下的文档流。z-index的值越大，元素位置越靠上。

设置position为absolute或relative存在一定的差异。

设置position: relative会保留自己在z-index: 0层的占位，left、top、right、bottom值是相对于自己在z-index: 0层的位置，虽然它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位置，但对其他仍然在z-index: 0层的元素位置不会造成影响。

设置position: absolute会完全脱离文档流，不再在z-index: 0层保留占位符，其left、top、right、bottom值是相对于自己最近的一个设置了position: relative或position: absolute的祖先元素的，如果组向元素全都没有设置position: absolute或position: relative，那么就相对于body元素。