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

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

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

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

wxml部分

</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

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

微信小程序中多个button/view组件中进行切换时改变样式
在小程序项目中遇到一个问题:数据分成四五个小组,然后要进行小组切换,切换的同时把button的样式也要改变,以前Dom操作的时候特别简单, 现在在小程序中竟不知从何下手,后面参照了这边博文:http: ...
微信小程序template模板与component自定义组件的区别和使用
前言: 除了component,微信小程序中还有另一种组件化你的方式template模板,这两者之间的区别是,template主要是展示,方法则需要在调用的页面中定义.而component组件则有自己 ...
微信小程序网悦新闻开发--自定义组件开发（六）
目录微信小程序网悦新闻开发--功能介绍(一) 微信小程序网悦新闻开发--小程序配置(二) 微信小程序网悦新闻开发--首页模块开发(三) 微信小程序网悦新闻开发--视频模块开发(四) 微信小程序网悦新 ...
小程序中textarea层级最高的结局办法
在小程序中textarea层级比较高,当底部有fiexd定位的时候或出现文本框中的文本穿透显示出来,解决办法是在texarea标签下面添加一个view或者text标签来和texarea标签替换使用 & ...
微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标能够知道如何自定义小程序组件能够知道小程序组件中behaviors的作用能够知道如何安装和配置vant-weapp组件库能够知道如何使用MobX ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
微信小程序关联公众号：official-account组件的使用
official-account组件说明: 用户扫码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内. 先说明一个重点啊:想使用这个组件,小程序基础库要在 ...
小程序内配置公众号关注组件
official-account 基础库 2.3.0 开始支持,低版本需做兼容处理. 用户扫码打开小程序时,开发者可在小程序内配置公众号关注组件,方便用户快捷关注公众号,可嵌套在原生组件内. Tips ...

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

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

最新文章

热门文章