CODEWITHSUNDEEP
htmlcssposition
Paul
Paul

Reputation: 3368

Absolute element not placing over relative element

Within my header, I am trying to place pending-button-notification over theimages-cart image. For some reason, the pending-button-notification div is showing on the left side of the header div.

Does anyone see why this isn't placing correctly?

This is the problematic 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>

Upvotes: 0

Views: 45

Answers (2)

Tiago Roque
Tiago Roque

Reputation: 43

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

Upvotes: 0

AGB
AGB

Reputation: 2448

It's your float:right on .header-buttons which is causing the problem.

I suggest that you remove that and float the #pending-order-button div instead so that it and all it's content is moved to the right.

Upvotes: 2

Related Questions