絕對元素不放在相對元素

在我的頭文件中，我試圖將pending-button-notification放在images-cart圖片上。出於某種原因，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>

來源

2017-04-07 Paul

您的圖片右移，位置在左邊 – LGSon

這是你float:right上.header-buttons這是造成問題。

我建議你刪除它並浮動#pending-order-button div，以便它和它的所有內容都移到右側。

來源

2017-04-07 15:38:39

謝謝！我得到它的工作。我很感激幫助。 – Paul

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

來源

2017-04-07 15:38:14

絕對元素不放在相對元素

回答

相關問題