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

版权声明: https://blog.csdn.net/qq_32858649/article/details/82735649

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

今天遇到的这个问题是这样的,我们经常会写一些页面就是类似弹窗一样的页面,或者像淘宝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

展开阅读全文

没有更多推荐了,返回首页