如何相对定位使用 z-index 在小程序中将文字压在图片上？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何相对定位使用 z-index 在小程序中将文字压在图片上？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

如何在小程序中不使用绝对定位压住上面的图片？

在小程序开发中，有时候需要将文字内容压在图片上，但是又不想使用绝对定位来实现。这种情况可以使用相对定位和 z-index 属性来解决。

问题示例：

小程序中的代码如下：

<view class="index">
    <image mode="aspectfill" style="width: 100%;height: 364rpx;" src="https://sqt-1259302042.cos.ap-guangzhou.myqcloud.com/c4cca9041ee64272a1106674bb578555.jpg"></image>
    <view class="title">
        顶顶顶顶
    </view>
</view>

.index{
    width: 100%;
    height: 100vh;
}
.title{
    width: 100%;
    height: 520rpx;
    background-color: #ccc;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    overflow: hidden;
    margin-top: -130rpx;
    border-radius: 30rpx;
}

这时会出现问题，灰色背景无法显示，因为文字和灰色背景都在图片的后面。

解决方案：

可以使用以下方法解决：

1. 给 .title 类添加 position: relative 属性，使其相对定位。
2. 给 .title 类添加 z-index: 9 属性，使其位于图片上方。
3. 将 margin-top: -130rpx 改为 top: -130rpx。

修改后的代码：

.title{
    position: relative;
    z-index: 9;
    top: -130rpx;
}

通过这种方式，可以将文字和背景压在图片上面，而又不使用绝对定位。

今天关于《如何相对定位使用 z-index 在小程序中将文字压在图片上？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！