小程序开发中，如何在不使用绝对定位的情况下让文字区域压住图片？

小程序布局问题：无绝对定位压住上层图片

一名开发者在小程序开发中遇到一个问题，希望使用不使用绝对定位的情况下，让灰色的文字区域压住上面的图片。

问题具体如下：

<!-- ... -->
<view class="title">
  顶顶顶顶
</view><!-- ... -->

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

问题是，margin-top:-130rpx 导致文字区域在图片上面，而灰色背景看不到。

解决方案：

解决方法：

1. 使用相对定位（position: relative）和 z-index。
2. 将 margin-top 改为 top。

更新后的代码如下：

<!-- ... -->
<view class="title" style="position: relative; z-index: 1;">
  顶顶顶顶
</view><!-- ... -->

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

通过这些修改，文字区域将压住图片，而灰色背景也会可见。

以上就是小程序开发中，如何在不使用绝对定位的情况下让文字区域压住图片？的详细内容，更多请关注www.sxiaw.com其它相关文章！