z-index(层叠上下文)  

z-index层叠上下文小计(代码片段)

文档中的层叠上下文由满足以下任意一个条件的元素形成：

- 根元素 (HTML),

- z-index 值不为 "auto"的 绝对/相对定位,

- 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即：父元素 - display: flex|inline-flex,

- [opacity]属性值小于 1 的元素,

- [transform]属性值不为 "none"的元素,

- [mix-blend-mode]属性值不为 "normal"的元素,

- [filter]值不为“none”的元素,

- [perspective]值不为“none”的元素,

- [isolation]属性被设置为 "isolate"的元素,

- position: fixed

- 在 [will-change]中指定了任意 CSS 属性,即便你没有直接指定这些属性的值

- [-webkit-overflow-scrolling] 属性被设置 "touch"的元素

z-index不是写上去就会如你所想, 大在上, 小的在下. z-index会寻找一个参照, 来比较大小.

默认的层叠上下文元素只有根元素(html, 小程序里是page). 所以, 当一个dom树没有形成局部层叠上下文时, 总会以根元素为基准对比.  

```html

<view class='box'>

<view class="one">1</view>

<view class="two">2</view>

</view>

```

```css

.one {

z-index: 2;

position: absolute;

width: 100rpx;

height: 50rpx;

background: pink;

}

.two {

z-index: 1;

position: absolute;

width: 300rpx;

height: 100rpx;

background: skyblue;

}

```

如此一个z-index, class1在class2之上无误.

```html

<view class='box'>

<view class="three">

<view class='five'>5</view>

3

</view>

<view class="four">4</view>

</view>

```

```css

.three {

z-index: 3;

position: absolute;

width: 300rpx;

height: 150rpx;

background: orangered;

}

.five {

z-index: 5;

position: absolute;

width: 200rpx;

height: 100rpx;

background: yellow;

}

.four {

z-index: 4;

position: absolute;

top: 0;

width: 100rpx;

height: 200rpx;

background: green;

}

```

但是如果你有这么一个结构的`wxml(html)`, z-index为class5的的元素并不会在class4之上, 因为它的父元素的z-index为3, 在4之下. 这是z-index:3给class3的view创建了一个局部层叠上下文, 其中的层叠元素会以class3位基准. class3和class4是一个级别的, 他们才会进行对比.

```html

<view class='box'>

<view class="six">

<view class='eight'>8</view>

6

</view>

<view class="seven">7</view>

</view>

```

```css

.six {

position: absolute;

width: 300rpx;

height: 150rpx;

background: orange;

}

.eight {

z-index: 8;

position: absolute;

width: 200rpx;

height: 100rpx;

background: purple;

}

.seven {

z-index: 7;

position: absolute;

top: 0;

width: 100rpx;

height: 200rpx;

background: yellowgreen;

}

```

此时class6和class7在同一个层叠上下文: 根元素(page)里, 所以他们会直接进行比较.