html - 右上角带有圆形柜台的购物车无法正确呈现

Question

我正在尝试像这样制作购物车的布局 example .但无法将其放在购物车的右上角。我的情况有点不同，在大屏幕上，气泡应该显示在文本 CART 的右上角，而在小屏幕上，它应该显示在购物车图像的右上角。

注意:滚动时 action_bar 会粘在顶部，所以我猜 position fixed 不能用于“total”div。

HTML

<div id="sticky-anchor"></div>
<div id="action_bar">
    <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div id="total">1</div></div>
    <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i></div>
</div> 

CSS

#action_bar {
    background-color: #FFFFFF;
    color: #FFFFFF;
    clear: both;
    overflow: hidden;
}

#cart {
    right: 0;
    width: 15%;
    height: 10%;
    background-color: #20AC76;
    color: #FFFFFF;
    padding: 10px;
    float: right;
    border: #1C9767 1px solid;
    font-size: 22px;
    text-align: left;
}

.fa fa-shopping-cart {
    float: left;
}

#total {
    float: right;
    text-align: center;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #20AC76;
    width: 20px;
    height: 20px;
    font-size: 1rem;
}

#cart:after {
    content: '  Cart';
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
    #cart {
        right: 0;
        width: 20%;
        height: 10%;
        background-color: #20AC76;
        color: #FFFFFF;
        padding: 10px;
        float: right;
        border: #1C9767 1px solid;
        font-size: 22px;
        text-align: center;
    }

    #cart:after {
        content: normal;
    }

    #total {
        padding-right: 0;
    }
}

Answer 1

您需要将#cart 放在“position:relative”上并将#total 放在position:absolute 上，现在您可以使用left 属性移动#total

#action_bar {
    background-color: #FFFFFF;
    color: #FFFFFF;
    clear: both;
    overflow: hidden;
}

#cart {
    right: 0;
    width: 15%;
    height: 10%;
    background-color: #20AC76;
    color: #FFFFFF;
    padding: 10px;
    float: right;
    border: #1C9767 1px solid;
    font-size: 22px;
    text-align: left;
  position:relative;
}

.fa fa-shopping-cart {
    float: left;
}

#total {
    float: right;
    text-align: center;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #20AC76;
    width: 20px;
    height: 20px;
    font-size: 1rem; 
    position:absolute; 
    left: 40px
}

#cart:after {
    content: '  Cart';
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
    #cart {
        right: 0;
        width: 20%;
        height: 10%;
        background-color: #20AC76;
        color: #FFFFFF;
        padding: 10px;
        float: right;
        border: #1C9767 1px solid;
        font-size: 22px;
        text-align: center;
    }

    #cart:after {
        content: normal;
    }

    #total {
        padding-right: 0;
    }
}

<div id="sticky-anchor"></div>
<div id="action_bar">
    <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div id="total">1</div></div>
    <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i></div>
</div>