
小程序布局中压住上方图片技巧
在小程序中,如果需要将文字内容压住上方图片,而又不使用绝对定位,可以使用以下技巧:
使用相对定位 + z-index
将需要压住图片的元素设置为相对定位,并设置较高的 z-index,使其叠加在图片之上。例如:
.text-wrapper {
position: relative;
z-index: 1; /* 设置较高的 z-index */
}使用 top 属性
将需要压住图片的元素的 margin-top 属性改为 top 属性。top 属性可以指定元素相对于其父元素顶部的偏移量。例如:
.text-wrapper {
position: relative;
top: -130rpx; /* 相对于父元素顶部偏移 -130rpx */
}通过以上技巧,可以将文字内容压住上方图片,同时保持布局的灵活性。需要注意的是,这种方式适用于非绝对定位的情况,如果需要更复杂的布局,可以使用绝对定位进行调整。










