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

最新推荐文章于 2024-06-18 23:15:16 发布

隔壁憨憨

最新推荐文章于 2024-06-18 23:15:16 发布

阅读量1.2w

点赞数 8

文章标签：微信小程序 div显示层级 view显示层级

本文链接：https://blog.youkuaiyun.com/weixin_42301205/article/details/100155484

版权

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
}