html
<view class="container"> <image class="" src="{{book.image}}"></image> <view class="description"> <text class="title">{{book.title}}</text> <text class="author">{{book.author}}</text> <view class='foot'> <text class="footer">{{book.fav_nums}} 喜欢</text> </view> </view> </view>
css
/* component/page/index.wxss */ .container { display: flex; flex-direction: column; align-items: center; margin-top: 30rpx; box-shadow: 2px 2px 3px #e3e3e3e3; position: relative; width: 240rpx; height: 360rpx; } .container image{ width: 100%; height: 100%; border-radius: 2px; } .description { width: 100%; position:absolute; z-index:2; left:0; bottom:0; background-color: white; }
Here we use the position: absolute; also set bottom: 0; left: 0; to generate absolute positioning here because we position: absolute to be effective,
Relative to the first parent element is positioned outside the static positioning so we set the relative positioning element is the parent