小程序不使用绝对定位怎样压住上面的图片？

Question

使用margin-top:-130rpx文字在图片上面 灰色背景看不到 这怎么回事？应该怎样布局？
小程序代码片段https://developers.weixin.qq....

<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;
}

Answer 1

相对定位 + z-index margin-top 改成 top

Answer 2

1. 可以考虑图片做背景图
2. 你试试将图片设置为 display: block;