微信小程序-设置显示层级

index.wxml

z-index的值越大，view显示在越上面，反之z-index的值越小，view显示在越下面

<view class="div-relative"> <view class="div-a">我背景为红色</view> <view class="div-b">我背景为黄色</view> <view class="div-c">我背景为蓝色</view>
</view>

index.wxss

.div-relative{position:relative;color:#000;border:1px solid #000;width:500px;height:400px
}
/* 背景色为红色 */
.div-a{ position:absolute;left:30px;top:30px;z-index:300;background:#F00;width:200px;height:100px
}
/* 背景为黄色 */
.div-b{ position:absolute;left:50px;top:60px;z-index:200;background:#FF0;width:400px;height:200px;
} /* 背景为蓝色 */
.div-c{ position:absolute;left:80px;top:80px;z-index:210;background:#00F;width:300px;height:300px
}

效果

微信小程序-设置显示层级相关推荐

微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...
家用电脑设置成小程序服务器,电脑微信小程序设置全屏的方法是什么
电脑微信小程序设置全屏的方法是什么方法:首先配置小程序resizeable的参数设置为true,这样操作可以在电脑端打开一个较大的横向窗口显示,屏幕大小是1024乘以768的,然后再按下全屏按钮,便 ...
微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片微信小程序中不能使用本地图片 background-image:url ...
制作esp32-cam拍照上传，微信小程序照片显示的监控小车
前期配件准备 ESP32-CAM开发环境配置程序下载连接小车控制台查看图片微信小程序的开发 1.前期配件准备小车套件(网上购买即可,较为方便的选择) ESP32-CAM (推荐安信可,外加T ...
微信小程序设置倒计时效果
效果微信小程序设置倒计时步骤 1.设置一个定时器,然后将时间设为一秒 2.在这个函数里将当前时间距终止的时间,的时间戳的差值减一 3.计算剩余的时间,还剩的时分秒等 4.将计算的时间保存到data中 ...
ESP8266读DHT11温湿度，开发微信小程序实时显示
ESP8266读DHT11温湿度,开发微信小程序实时显示第一.原理讲解第二.ESP8266读取DHT11 第三.温湿度推送到云端第四.微信小程序开发个人可免费注册五个微信小程序账号. 第一.原 ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
微信小程序不显示base64位图片
我是用uniapp开发,一开始在微信小程序无法显示base64 图片但是在开发者工具上可以如果是存在自动换行的话可以使用 xxx.replace(/[\r\n]/g,""); ...

微信小程序-设置显示层级

index.wxml

index.wxss

效果

微信小程序-设置显示层级相关推荐

最新文章

热门文章