如何在小程序中不使用绝对定位压住上面的图片？
在小程序开发中，有时候需要将文字内容压在图片上，但是又不想使用绝对定位来实现。这种情况可以使用相对定位和 z-index 属性来解决。
问题示例：
小程序中的代码如下：
顶顶顶顶
.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 在小程序中将文字压在图片上？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630044.html
微信扫一扫 
支付宝扫一扫 
