Nfer Zhuang's Blog

在CSS世界中，z-index属性和定位元素在一起可以控制z轴顺序。理论上，数值越大层级越高。但在实际使用中会有很多细节需要注意。

背景描述

在一个小程序项目中有这样的一个需求：页面包含一个元素A和一个列表B，需要实现列表B的一部分在元素A之上，一部分在元素A之下。
基于组件封装的思想，一般的做法是：元素A是一个组件，列表B是另外一个组件。但是在这种布局下，发现无论如何调整元素A、列表B以及子元素的z-index，都无法满足“列表B的一部分在元素A之上，一部分在元素A之下”的效果。

图中的上半部分是预期表现，而下半部分是实际表现。可以看到，列表B要不整个在元素A之上，要不就是整个在元素A之下。

小程序代码片段

小程序真机下会出现canvas metrics 无法获取字体高度的问题，模拟器下表现正常。

背景描述

在一个项目下需要在canvas中对一行文本垂直居中展示，以下是一个示例效果：

在模拟器上的表现很正常，但是到了真机上后文本位置出现严重的偏差。验证了iOS设备和Android设备都无法按预期做到垂直居中展示。

小程序模拟器下会出现 canvas z-index 显示异常，真机下表现正常。

背景描述

在一个项目下需要做一个环形的动画，中间围绕的部分是一个canvas对象，在模拟器上无论如何设置z-index，canvas对象始终都显示在最上层。

在模拟器上的渲染效果如上图，而实际的预期是上面的box应该在canvas对象下面，而下面的box应该在canvas对象上面，模拟器上的效果始终是canvas对象在最上层。

小程序代码片段