当前位置：网站首页>【微信小程序】z-index失效

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

2022-04-23 12:16:00 【少年歌行s】

首先看需求：

<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 就能生效啦！

版权声明
本文为[少年歌行s]所创，转载请带上原文链接，感谢
https://blog.csdn.net/MinfCONS/article/details/124311224