Absolutes Element, das nicht über dem relativen Element platziert wird

Question

In meiner Kopfzeile versuche ich pending-button-notification über das images-cart Bild zu platzieren. Aus irgendeinem Grund wird das div auf der linken Seite des Headers div angezeigt.

Kann jemand sehen, warum dies nicht richtig platziert?

Dies ist der problematische Code:

<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

Es ist Ihr float:right auf .header-buttons, die das Problem verursacht.

Ich schlage vor, dass Sie das entfernen und float #pending-order-button div stattdessen, so dass es und alle Inhalte es nach rechts verschoben wird.

Answer 2

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