css 父元素clip-path方法导致子元素 z-index:-1 无效?
当前效果
加了clip-path后
<view class="top_case">
<view class="case_back"></view>
<view class="flex-column case_tilte">
<text>Q&A</text>
<text>市场问答</text>
</view>
</view>
css
.top_case {
height: 240rpx;
background: #E4C9FE;
-webkit-clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
margin: 30rpx 40rpx;
position: relative;
}
.case_back {
width: 100%;
height: inherit;
background: #212121;
-webkit-clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
position: absolute;
left: 10rpx;
top: 10rpx;
z-index: -1;
}
主要是嵌套在里面了,比如盒子内的东西无法放下盒子下面一样
<view class="case_back"></view>
<view class="case_back1"></view>
<view class="flex-column case_tilte">
<text>Q&A</text>
<text>市场问答</text>
</view>
</view>
height: 240rpx;
margin: 30rpx 40rpx;
position: relative;
}
.case_tilte {
position: absolute;
z-index: 3;
}
.case_back {
width: 100%;
height: inherit;
background: #E4C9FE;
-webkit-clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
position: absolute;
z-index: 1;
}
.case_back1 {
width: 100%;
height: inherit;
background: #212121;
-webkit-clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
clip-path: polygon(90% 0, 100% 28%, 100% 100%, 0 100%, 0 0);
position: absolute;
left: 10rpx;
top: 10rpx;
z-index: -1;
}