CSS层叠上下文

[nitroge]

层叠（z-index）->谁大谁上 后来居上

z-index不犯二准则：避免z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协作以及后维护的时候。例如，A小图标定位，习惯性写了个z-index:9；B一看，自己原来的实现被盖了，立马写了个 z-index:9；结果比弹框组件层级还高，那还得了，立马弹框组件来一个z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的z-index层级管理就是一团糟。

relative最小化原则

在某个模块右上角定位一个图标：

<div>
<img src="icon.png" />
<p>内容1</p1>
<p>内容2</p1>
...
</div>
// 如果让大家实现的话，我估计八九不离十都会如下实现：
<div style="position: relative">
<img src="icon.png" style="position: absolute; top: right; right: 0" />
<p>内容1</p1>
<p>内容2</p1>
</div>
// relative最小化原则
<div>
<div style="position: relative">
<img src="icon.png" style="position: absolute; top: right; right: 0" />
</div>
<p>内容1</p1>
<p>内容2</p1>
</div>

差别在于，此时relative影响的元素只是我们的图标，后面内容仍保持开始时的干净状态
有人可能会疑问：为什么要多次一举？举个栗子：A模块下面有个B模块，B设置了margin-top:-100px想要覆盖A模块。但A模块设置了position：relative，你会发现B反倒被A模块覆盖了，why？原因很简单，相比普通元素，相对元素的层叠顺序是“鬼畜”级别的。况且日后要你删除这个绝对定位元素，父级position：relative你敢删吗？