如何相对定位使用 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;
}

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

解决方案：

可以使用以下方法解决：

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

修改后的代码：

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

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

以上就是如何相对定位使用 z-index 在小程序中将文字压在图片上？的详细内容，更多请关注其它相关文章！