Корзина с кругом счетчик в правом верхнем углу не рендеринга должным образом

Я пытаюсь сделать макет тележки похожим на этот пример . Но не в состоянии положить его в правом верхнем углу тележки. Моя вещь немного отличается, когда на большом экране пузырь должен отображаться в правом верхнем углу текстовой корзины, а на маленьком экране он должен отображаться в правом верхнем углу изображения корзины.

Примечание: action_bar прилипает к верхней части при прокрутке, поэтому я предполагаю, что фиксированная позиция не может использоваться для «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;
    }
}

1 ответ

  1. Нужно поставить #cart на «position: relative» и #total в position:absolute, теперь вы можете перемещать #total с left property

    #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>