微信小程序布局图片上面添加文字

效果图：

补充知识：

CSS position 相对定位和绝对定位

一、position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

二、relative定位与absolute定位的区别

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

11

参考文章：css之position相对定位和绝对定位 - youyi2016 - 博客园

详细代码加教程：

wxml中设置一个父级的大盒子，里面包括了图片的盒子和你文字的盒子。

<view class="ceshi">
     <image style="width: 400rpx; height: 300rpx;" src="/pages/jigouXQ/images/468877cba9fa04b3d36a2db3d4aabf5.jpg" mode=""/>
      <view class="ceshi_child">居家养老</view>
   </view>

进行相对位置和绝对位置的设置：
在ceshi_child中利用   
left:50rpx;
   top: 100rpx;
   right: 0;
   bottom: 0;
将文字调整到适当位置即可

 注意：ceshi_child和ceshi的宽高要相同。

.ceshi{
    width: 400rpx; 
    height: 300rpx;
    position: relative;
    
}
.ceshi_child{
   
    height: 300rpx;
   position: absolute;
   left:50rpx;
   top: 100rpx;
   right: 0;
   bottom: 0;  
   
}

心中无女人，代码自然神。————XT路仁

原文链接：微信小程序布局图片上面添加文字 - XT杂谈 (yzre.cn)