절대 요소가 상대 요소 위에 놓이지 않음

Question

내 머리글 내에 images-cart 이미지 위에 pending-button-notification을 배치하려고합니다. 어떤 이유로 든 pending-button-notification div가 헤더 div의 왼쪽에 표시됩니다.

왜 이것이 올바르게 배치되지 않는지 누구에게 알 수 있습니까?

<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

그것은 당신의 float:right 문제를 일으키는 .header-buttons에있어 : ​​

이 문제가있는 코드입니다.

#pending-order-button div를 제거하고 내용을 모두 오른쪽으로 옮기는 것이 좋습니다.

Answer 2

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