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

首先看需求:

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

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

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

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

  1. z-index 只有在 positionabsolute | fixed | relative | sticky 时才生效.
  2. 当父元素设置了 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 就能生效啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值