z-index 为什么要在这里提到 `z-index` 属性呢？那是因为 `z-index` 属性只对定位元素有效，即 `position` 值为 `absolute,relative,fixed` 时才有效。我们首先了解下什么叫 z-index。  从上图我们不难发现 `z-index` 值代表的是元素的堆叠顺序，值越高则显示顺序越优先。 ~~~ <div style="position: absolute;z-index:1">Im an absolute element</div> <div style="position: fixed;z-index:2">Im a fixed element</div> ~~~ //`fixed` 元素 `z-index` 比 `absoulute` 元素高，所以显示在前面 （我把背景色调为非透明，这样可以看得更清楚），假如 z-index 值相同会出现什么情况呢？ ~~~ <div style="position: absolute;z-index:1">Im an absolute element</div> <div style="position: fixed;z-index:1">Im a fixed element</div> ~~~ //`z-index `值相同，仍然显示为 `fixed` 元素 所以我们知道，当 `z-index` 值相同时，后加载的元素显示优先。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。 >详细参考：[层叠上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)