z-index

z-index 属性设置元素在渲染时的z轴顺序。在同一个层叠上下文下z-index较大的元素会覆盖在z-index较小的元素上面。

z-index并非一直有效果，如果加上z-index后元素仍未创建层叠上下文，则z-index属性无效。例如对于一个样式为position: static;（无其他会创建层叠上下文的样式）的元素设置z-index并不会改变其层级。

z-index文档参考：MDN z-index

层叠上下文文档参考：层叠上下文

以如下树形dom结构为例

root
|-- view#1
    |-- view#1-1
    |-- view#1-2
|-- view#2
    |-- view#2-1
    |-- view#2-2

如果view#1元素创建了层叠上下文，则其子元素view#1-1、view#1-2就会不在渲染时和view#2及其子元素进行层级比较。此时view#1-1与view#2及view#2子元素的层级高低取决于view#1和view#2的层级高低。

如果view#1、view#2均未创建层叠上下文，则这两个元素及其子元素（view#1-1等）会在渲染时进行层级比较。此时如果设置view#1-1的样式为position: relative; z-index: 100;，则子元素在z轴的顺序为view#1-2 --> view#2-1 --> view#2-2 --> view#1-1。

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

语法

z-index: auto | <integer>;

z-index 的属性值

名称	兼容性	描述
auto	Web Android iOS 4.0 - -	盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。

默认值

平台	默认值
uvue-app	0
uvue-web	auto

注意：W3C 默认值为：auto

示例

hello uni-app x

扫码体验（手机浏览器跳转到App直达页）

扫码体验

Template

Script

<template>
  <view style="flex-grow: 1;">
    <view style="position:absolute;z-index:0;">
      <view class="common fixed default">
        <text>position: fixed</text>
        <text>z-index: 10</text>
      </view>
      <view class="common fixed specified">
        <text>position: fixed</text>
        <text>z-index: 5</text>
      </view>
      <view class="common fixed floor">
        <text>position: fixed</text>
        <text>z-index: -1</text>
      </view>
    </view>
    <view style="top: 250px;">
      <view class="common" style="background-color: red;z-index: 10;">
        <text>z-index: 10</text>
      </view>
      <view ref="view" class="common" style="background-color: green;z-index: 5;top: -37px;left: 87px;"
        @click="changeZIndex(20)">
        <text>z-index: {{zIndex}}</text>
        <text>点击修改z-index</text>
      </view>
      <view class="common" style="background-color: blue;top: -75px;left: 175px;">
        <text>z-index: 0</text>
      </view>
    </view>
    <view>
      <view>
        <view class="common fixed popup" style="background-color: aqua;z-index: 5;">
          <text>position: fixed</text>
          <text>z-index: 5</text>
        </view>
      </view>
    </view>
  </view>
  <view v-if="autoTest">
    <view style="z-index: 1;position: fixed;">111</view>
    <view style="width: 750rpx;">222</view>
  </view>
</template>



<style>
  .common {
    width: 125px;
    height: 125px;
    justify-content: center;
    align-items: center;
  }

  .fixed {
    position: fixed;
  }

  .default {
    background-color: red;
    z-index: 10;
    top: var(--window-top);
  }

  .specified {
    background-color: green;
    z-index: 5;
    left: 87px;
    /* #ifdef APP */
    top: 87px;
    /* #endif */
    /* #ifdef H5 */
    top: calc(var(--window-top) + 87px);
    /* #endif */
  }

  .floor {
    background-color: chocolate;
    /* #ifdef APP */
    top: 250px;
    /* #endif */
    /* #ifdef H5 */
    top: calc(var(--window-top) + 250px);
    /* #endif */
    left: 175px;
    z-index: -1;
  }

  .popup {
    /* #ifdef APP */
    top: 320px;
    /* #endif */
    /* #ifdef H5 */
    top: calc(var(--window-top) + 320px);
    /* #endif */
    left: 87px;
    height: 40px;
  }
</style>

平台差异

1. app端z-index默认值为0，web端默认值为auto。position的默认值都是relative。

HBuilderX 4.11版本web版将内置组件的默认z-index设为了0，于4.12版本撤回此修改。因此在4.11版本web端和app端无此项差异。

在app端每个元素都会创建层叠上下文，子元素不可跨父元素进行层级比较。

web端在没有其他会产生层叠上下文的属性干扰时不会创建层叠上下文，其子元素可在最近的一个拥有层叠上下文的祖先元素内跨父元素比较层级。

如下示例在app端四个方块自上而下颜色分别是green -> blue -> aqua -> red，web端颜色自上而下分别是aqua -> green -> blue -> red

<template>
  <view style="z-index: 0;flex: 1;">
    <view>
      <view id="view-1-1" class="square" style="z-index: 4;background-color: aqua;"></view>
      <view id="view-1-2" class="square" style="z-index: 1;background-color: red;margin-top: -90px;margin-left: 10px;"></view>
    </view>
    <view style="position: absolute; top: 20px;">
      <view id="view-2-1" class="square" style="z-index: 3;background-color: green;margin-left: 20px;"></view>
      <view id="view-2-2" class="square" style="z-index: 2;background-color: blue;margin-top: -90px;margin-left: 30px;"></view>
    </view>
  </view>
</template>
<script>
export default {}
</script>
<style>
  .square {
    width: 100px;
    height: 100px;
  }
</style>

2. app端position: fixed;定位的元素会移至根节点下渲染，web端position: fixed;无特殊处理。

app端对position: fixed;的元素设置z-index，此元素可以与根节点的其他子节点进行层级比较。

web端对position: fixed;的元素设置z-index，此元素仍会在所属的层叠上下文下和其他元素比较层级。

在上面示例的基础上我们将view-1-2设为position: fixed;，如下示例在app端四个方块自上而下颜色分别是red -> green -> blue -> aqua，web端颜色自上而下分别是aqua -> green -> blue -> red

<template>
  <view style="z-index: 0;flex: 1;">
    <view>
      <view id="view-1-1" class="square" style="z-index: 4;background-color: aqua;"></view>
      <view id="view-1-2" class="square view-1-2" style="z-index: 1;background-color: red;"></view>
    </view>
    <view style="position: absolute; top: 20px;">
      <view id="view-2-1" class="square" style="z-index: 3;background-color: green;margin-left: 20px;"></view>
      <view id="view-2-2" class="square" style="z-index: 2;background-color: blue;margin-top: -90px;margin-left: 30px;"></view>
    </view>
  </view>
</template>
<script>
export default {}
</script>
<style>
  .square {
    width: 100px;
    height: 100px;
  }

  .view-1-2 {
    position: fixed;
    left: 10px;
    /* #ifdef APP */
    top: 10px;
    /* #endif */
    /* #ifdef WEB */
    top: calc(var(--window-top) + 10px);
    /* #endif */
  }
</style>

全局弹窗

了解了z-index特性及平台差异后，可以看出如果直接对层级比较深的元素设置一个较大的z-index并不一定能将此元素覆盖在所有元素之上。如需使用fixed实现弹窗覆盖其他元素，建议将弹窗放在页面末尾。

Bug & Tips

• App平台仅对同级的兄弟元素之间支持 z-index 来调节，同级元素中 z-index 较大的元素会覆盖较小的元素在上层进行显示，没有设置 z-index 值时，同级元素中写在后面的元素覆盖写在前面的元素。
• App平台元素设置position为fixed时，会将元素调整到根节点，此时z-index会在根节点中比较确定覆盖关系。
• App 平台 list-view 的子组件 list-item 有复用优化机制，list-item 组件不支持 z-index 属性。

参见

• MDN Reference
• 相关 Bug