【微信小程序】z-index失效

原创已于 2022-10-30 10:03:01 修改 · 6.7k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #微信小程序 #前端

于 2022-04-21 21:44:27 首次发布

微信小程序专栏收录该内容

13 篇文章

订阅专栏

本文探讨了如何在HTML布局中实现C元素在A和B之间的层级关系，揭示了z-index在position属性影响下的工作原理，并提供了两种解决方法：外层套盒和绝对定位。

首先看需求：

<view class="A"></view>

<view class="B">
	<view class="C"></view>
</view>

我希望层级关系： C > A > B

简单的给 z-index 是不行的，你会发现 C 的 z-index 始终跟随父元素 B ，为什么呢？来仔细看看 z-index 的规则

z-index 只有在 position 为 absolute | fixed | relative | sticky 时才生效.
当父元素设置了 z-index 后，其子元素所设置的 z-index 都将在父元素内进行排列，这种情况下的子元素不会与父元素外部其他元素出现渲染层次交叉的情况。

第二条也被称为堆叠上下文，这里不再解释这个名词，感兴趣的可以自己搜索一下。我直接说我的理解：

每个被设置 z-index 属性的元素就是一个平行空间，该元素下的子元素只能在该平行空间进行层级比较，而无法与其他平行空间的元素进行层级比较。

说结论：在该HTML布局下，本题无解。

当然，题主还是找到了两种解法，都需要改变HTML布局：

<!-- 最外层套一个父盒子，这样大家都在同一平行宇宙了 -->
<view class="套盒子">
	<view class="A"></view>

	<view class="B">
		<view class="C"></view>
	</view>
</view>

<!-- 将 C 盒子拿出来，使用绝对定位，或调整代码顺序使其放在合适位置 -->
<view class="A"></view>

<view class="C"></view>
<view class="B"></view>

这样 z-index 就能生效啦！