絶対要素が相対要素の上に置かれない

Question

私のヘッダーのなかで、images-cartイメージにpending-button-notificationを配置しようとしています。なんらかの理由で、pending-button-notification divがヘッダーdivの左側に表示されています。

これが正しく配置されない理由は誰に見えますか？

これは問題のあるコードです：それが問題を引き起こしている.header-buttons上ごfloat:rightだ

<div id="pending-order-button"> 
    <a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car"> 
     <div id="pending-button-notification"></div> 
    </a> 
</div> 

header { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100px; 
 
    position: relative; 
 
    border-bottom: 1px solid #E5E5E5; 
 
} 
 
#header-wrap { 
 
    width: 90%; 
 
    height: 100%; 
 
    margin: auto 5%; 
 
} 
 
#header-logo { 
 
    width: 200px; 
 
    height: auto; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.header-buttons { 
 
    width: 30px; 
 
    height: auto; 
 
    float: right; 
 
    margin: 30px 40px 0 50px; 
 
    cursor: pointer; 
 
} 
 
.header-buttons:first-child { 
 
    margin-right: 0; 
 
} 
 
#pending-order-button { 
 
    position: relative; 
 
} 
 
#pending-button-notification { 
 
    border-radius: 15px; 
 
    background: #09afdf; 
 
    height: 25px; 
 
    width: 25px; 
 
    position: absolute; 
 
    color: #FFF; 
 
    font-size: 1.3rem; 
 
    top: 5px; 
 
    left: 5px; 
 
    text-align: center; 
 
}

<header> 
 
    <div id="header-wrap"> 
 
    <a href="dashboard.html">Logo</a> 
 
    <img src="images/menu.png" class="header-buttons" alt="Pending Orders"> 
 
    <div id="pending-order-button"> 
 
     <a href="pendingOrders.html"><img src="images/cart.png" class="header-buttons" alt="Car"> 
 
     <div id="pending-button-notification"></div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

。

これを削除し、#pending-order-button divをフロートさせて、そのコンテンツとすべてのコンテンツを右側に移動することをお勧めします。

Answer 2

#pending-order-button { 
    position: relative; 
    float:right; 
}