[Applet de WeChat] El índice z no es válido

Primero mira los requisitos:

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

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

Quiero la relación jerárquica: C > A > B

Simplemente dar no z-indexes suficiente, encontrarás Cque z-indexsiempre sigue al elemento padre B, ¿por qué? Echemos un vistazo más de cerca a z-indexlas reglas.

1. z-indexpositionSolo absolute | fixed | relative | stickytiene efecto si es .
2. Cuando se z-indexestablece , el conjunto de sus elementos secundarios z-indexse organizará dentro del elemento principal. En este caso, el elemento secundario no cruzará la jerarquía de representación con otros elementos fuera del elemento principal.

El segundo artículo también se llama contexto de apilamiento . Este término no se explicará aquí. Si está interesado, puede buscarlo usted mismo. Declaro directamente mi entendimiento:

Cada elemento cuyo z-indexatributo es un espacio paralelo , y los subelementos debajo de este elemento solo se pueden comparar jerárquicamente en este espacio paralelo , pero no se pueden comparar con elementos en otros espacios paralelos .

Conclusión: bajo este diseño HTML, no hay solución a este problema.

Por supuesto, el tema todavía encontró dos soluciones, las cuales necesitan cambiar el diseño 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¡ Esto funcionará!