小程序z-index层级问题view组件坑，z-index失效

刚转开发组不久让我写一下页面，然后呢小程序所有的都是需要重新看的。当然在转开发组之前我已经看过差不多一周的文档，大致是了解的，但是小程序的坑是官方文档没写的。

今天遇到的这个问题是这样的，我们经常会写一些页面就是类似弹窗一样的页面，或者像淘宝app下面的固定菜单栏，这时候呢，大家肯定是需要用到z-index这个css代码的

我早上写的时候怎么写都不成功，后来修改之后代码是这个样子才成功。

wxml部分

<view id="ce1">

<view class='ds'></view>

<view class='ceshi'></view>

</view>

wxss部分

.ds{

width: 100px;

height: 100px;

background: red;

z-index: 100;

position: absolute;

}

.ceshi{

position: absolute;

width: 50px;

height: 50px;

background:blue;

z-index: 100;

}

这里注意，z-index必须是双方组件都有position熟悉下才会生效。如果你上级，注意不是父级，很多文档在这块都误导人，说成父级，注意，你想在上层，那么就需要两个组件都需要有position属性。这样才能生效。而我早上为什么不生效也是因为这个原因。

当层级复杂的时候建议两个div都增加position属性，像上述情况其实通常来说一个position：absolute|fixed就可以了。

z-index生效原则，只对相同有position属性的组件生效，不对staic和relative生效。单独的position