0
点赞
收藏
分享

微信扫一扫

微信小程序让一个view放在另一个view上

霍华德 2022-01-26 阅读 65

主要使用的是 position和z-index这两个属性
直接看示例
我有如下两张图片,按照顺序图片2在图片1下边
在这里插入图片描述
现在想让图片2出现在图片1上,效果如图
在这里插入图片描述
代码如下:
wxml文件: 注意对三个view设置class

<view class="parent_view">
  <view class="view1">
    <image src="/static/getphoto.png" style="width: 340px; height: 405px;"></image>
  </view>
  <view class="view2">
    <image src="/static/hg.png" style="width: 100px; height: 100px;"></image>
  </view>
</view>

wxss文件:注意每个view的position和z-index属性
z-index数值越大表示越在上层

.parent_view{
  position: relative;
  z-index: 1;
}

.view1{
  position: absolute;
  z-index: 2;
}

.view2{
  position: absolute;
  z-index: 3;
  margin-top: 350rpx;   
  margin-left: 290rpx;  
}

大功告成!

举报

相关推荐

0 条评论