[wechat applet] Z-index is invalid

First of all, the demand ：

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

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

I want hierarchy ： C > A > B

Simple to z-index You can't , You'll find that C Of z-index Always follow the parent element B , Why? ？ Let's take a closer look z-index The rules of

1. z-index Only in position by absolute | fixed | relative | sticky When it comes into effect .
2. When the parent element is set z-index after , Set by its child elements z-index Will be arranged within the parent element , In this case, the child element will not cross the rendering hierarchy with other elements outside the parent element .

The second is also called Stack context , This term is no longer explained here , Those interested can search by themselves . Let me just say my understanding ：

Each is set z-index The element of the attribute is a Parallel space , The child elements under this element can only be in The parallel space Make a hierarchical comparison , and Elements that cannot be parallel to other spaces Make a hierarchical comparison .

Say conclusion ： In the HTML Under the layout , There is no solution to this problem .

Of course , The subject still found two solutions , All need to change HTML Layout ：

<!--  The outermost layer is covered with a parent box , So everyone is in the same parallel universe  -->
<view class=" Set box ">
	<view class="A"></view>

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

<!--  take  C  Take out the box , Use absolute positioning , Or adjust the code order to put it in the right place  -->
<view class="A"></view>

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

such z-index It will take effect ！