goods sets the location of cartcontrol-wrapper to absolute, which only appears at the bottom and cannot be displayed. Can only be relative positioning, what is the reason for this?
html Code
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}
<div class="extra">
<span class="count">{{food.sellCount}}</span>
<span>{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">{{food.price}}</span>
<span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
</div>
<div class="cartcontrol-wrapper">
<cartcontrol @add="addFood" :food="food"></cartcontrol>
</div>
</div>css Code
.price
font-weight: 700
line-height: 24px
.now
maigin-right: 8px
font-size: 14px
color: rgb(240,20,20)
.old
text-decoration: line-throught
font-size: 10px
color: rgb(147,153,159)
.cartcontrol-wrapper
/*position:absolute*/
position:relative
right: 0
bottom:12px