css 浮动在最上层_CSS的“层”峦“叠”翠

本文作者：高峰，360奇舞团前端工程师，W3C性能工作组/WOT工作组成员。

前言

提起，z-index大家脑海里可能会立刻浮现这样的知识点：“z-index的值大小控制元素在Z轴上显示的层级，z-index越大显示的层级越高(也就是在最上层，离观察者越近)，没有指定的按照出现顺序堆叠，此外z-index不能跨父元素比较。

z-index的使用似乎就是这么简单，对吧？

我们先看如下例1：

<div class="box box1">DIV#1，z-index为2</div>

  <div class="box box2">DIV#2，z-index为auto</div>

HTML中有如下两个元素，DIV#1的z-index为2，DIV#2向右向上偏移。问：它们谁会显示在上面？

demo1: https://codepen.io/verymuch/pen/jdNwOW/

如上所示，z-index为2的元素并没有显示在第二个元素上面。这似乎很奇怪，那到底是为什么呢？

如果你也对此存在困扰，那就和我一起往下看吧。笔者将逐步引导大家深入理解z-index的用法。

一、没有使用z-index时元素如何堆叠？

首先，我们先了解下默认情况下，元素的堆叠，即在没有使用z-index时，元素是如何堆叠的。

如果没有给任何元素指定z-index，则元素按照如下顺序进行堆叠(由下到上，由远及近)。

1. 根元素的背景和边框

2. 非定位的后代块元素，按照在HTML中的出现顺序进行堆叠

3. 定位的后代块元素，按照在HTML中的出现顺序进行堆叠

注：定位的元素即为position的值不是static的元素

demo2: https://codepen.io/verymuch/pen/KJPvpQ/

如上例2所示，定位的元素(DIV#1、DIV#2、DIV#3与DIV#4)按照出现的顺序堆叠。非定位的元素(DIV#5与DIV#6)虽然出现在后面，但是会被定位的元素遮盖，不过它们本身是按照出现顺序堆叠的。

注意，当使用order属性改变flex元素子元素的出现顺序时，