简体中文
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 较大的元素会覆盖较小的元素在上层进行显示。
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
z-index: auto | <integer>;
auto
盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。
平台 | 默认值 |
---|---|
uvue-app | 0 |
uvue-web | auto |
注意:W3C 默认值为:auto
Android | iOS | web | |
---|---|---|---|
auto | x | x | 4.0 |
Chrome | Edge | Firefox | Opera | Safari | IE | |
---|---|---|---|---|---|---|
z-index | √( 1 ) | √( 12 ) | √( 1 ) | √( 4 ) | √( 1 ) | √( 4 ) |
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>
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实现弹窗覆盖其他元素,建议将弹窗放在页面末尾。