仿饿了么项目，goods中cartcontrol-wrapper的绝对定位出现问题，只能相对定位

Question

goods中把cartcontrol-wrapper的位置设为absolute只能出现在最下方，而且显示不出来。只能相对定位，这是什么原因啊？

html代码

              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <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代码

          .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

Answer 1

绝对定位的参照物是就近的postion为非static的父级元素。
出现问题是因为div.content没有设置position，你想相对于它绝对定位，那么把div.content的position设置为relative即可。